CODEWITHSUNDEEP
cssmenualignment
user3535001
user3535001

Reputation: 11

Left align menu icon

Im trying to left align a menu icon.

The icon is displaying above the menu name but I would like to align in to the left of the menu name.

The CSS I have is:

.icon_name_here:before {
content: '';
width: 24px;
height: 24px;
display: inline-block;
float: left;
background: url('http://url_of_icon_here.com') no-repeat left;}

How / what do I have to do to align the icon to the left of the menu name?

Upvotes: 0

Views: 1514

Answers (3)

Kheema Pandey
Kheema Pandey

Reputation: 10285

Without posting a relevant code its hard to give a exact answer. I've tried to re-build on the assumption of the CSS you posted and here I've build a demo. See the DEMO .

CSS is like this. 

ul{margin:0;padding:0;}
ul li {padding:4px;}

.icon_name_here:before {
content: '';
width: 24px;
height: 24px;
display: block;
float: left;
padding:4px;
background: url('http://lorempixel.com/24/24/') no-repeat 0 0;}

HTML is like it.

 <ul>
    <li class="icon_name_here">Item1</li>
    <li>Item2</li>
  </ul>

Updates

you have to add a display:inline-block on <a> tag. Check the uploaded image.enter image description here

<a href="coffeeonline.co.za"; style="display:inline-block">HOME</a>

Upvotes: 1

AlexTroy
AlexTroy

Reputation: 405

You can use this method like a variant. It can be helpfull when you want to use sprites

HTML

<div class="your-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, beatae consequatur dolore doloribus dolorum harum, laboriosam magnam natus, numquam odit officiis quia quisquam suscipit tempora voluptatum. Facere quae quis sed?
</div>

CSS

.your-content {
    position: relative;
    padding: 0 0 0 10px; /*space between block edge and displaying of your text*/
}
.your-content:after {
    content:'';
    position: absolute;
    top: 0px; /*position of your icon*/
    left: 0px; /*position of your icon*/
    width: px; /*width of your icon*/
    height: px; /*height of your icon*/
    background: url(img/your-icon-bg.png)  no-repeat;
}

Upvotes: 0

Manjunath
Manjunath

Reputation: 56

use display: inline style for both image and Text

Upvotes: 0

Related Questions