CODEWITHSUNDEEP
htmlcss
Nick Berardi
Nick Berardi

Reputation: 334

How to align icons with their titles or text description?

My icons and texts are in different list tags. Icons aren't aligned with their titles. They are written as two unordered lists. The only solution I have right now is to merge lists to one ul, but I'm hoping there is a better way to do it. Any help would be very much appreciated.

<ul>
    <li><i class="fa fa-cog"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-user"></i></li>
    <li><i class="fa fa-cart"></i></li>
</ul>
<ul>
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>

Upvotes: 1

Views: 106

Answers (6)

Ans
Ans

Reputation: 147

I might be little late here. But try this:

li {
    display: inline-block;
    text-align: center;
    width: 50px;
}

Upvotes: 2

ustmaestro
ustmaestro

Reputation: 1283

The better way is to hold in one list instead of two

<ul class="menu">
  <li><i class="fa fa-cog"></i><span>Settings</span></li>
  <li><i class="fa fa-home"></i><span>Home</span></li>
  <li><i class="fa fa-user"></i><span>Account</span></li>
  <li><i class="fa fa-cart"></i><span>Cart</span></li>
</ul>

<button class="toogle-menu" type="button">toogle</button>

<script type="text/javascript">
    $('.toogle-menu').click(function(){
        $('.menu li span').toogle();        // http://api.jquery.com/toggle/
    });
</script>

<style>
    .menu{
        padding:0;
        margin:0;
        list-style:none;
    }
    .menu li{ 
        padding: 5px;
    }
    .menu li span{ 
        display: inline-block;
        margin: 0 0 0 5px;
    }

</style>

Upvotes: 0

Luthando Ntsekwa
Luthando Ntsekwa

Reputation: 4218

The best option is to use one list instead of two, but if you want you can float both <ul>'s to the left. please see below:

.icons{float:left;}
.names{float:left;}
<ul class="names">
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>
<ul class="icons">
    <li><i class="fa fa-cog"></i>icon-setting</li>
    <li><i class="fa fa-home"></i>icon-home</li>
    <li><i class="fa fa-user"></i>icon-account</li>
    <li><i class="fa fa-cart"></i>icon-cart</li>
</ul>

Upvotes: 0

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

@Manoj Kumar gave good ans but, if need two lists then try this 

.left{
  float: left;
}
.clear{
 clear: left; 
}
<ul class="left">
    <li><i class="fa fa-cog"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-user"></i></li>
    <li><i class="fa fa-cart"></i></li>
</ul>
<ul class="left">
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>
<div class="clear"></div>

Upvotes: 0

Karthik
Karthik

Reputation: 1751

Method 1: If you don't want icons and texts to be in same ul try defining fixed width for lis.

li {
    display: inline-block;
    margin: 0 40px;
    text-align: center;
    width: 100px;
}

Method 2: If you can Integrate 2 lists, that is better solution:

<ul>
    <li><i class="fa fa-cog"></i>Settings</li>
    <li><i class="fa fa-home"></i>Home</li>
    <li><i class="fa fa-user"></i>Account</li>
    <li><i class="fa fa-cart"></i>Cart</li>
</ul>

css:

ul li {
    display: inline-block;
    margin: 0 30px;
    text-align: center;
}
ul li i {
    display: block;
    /* add margins here to adjust icons */
}

Upvotes: 4

m4n0
m4n0

Reputation: 32255

Merge the icons and titles in one list.

<ul>
  <li><i class="fa fa-cog"></i>Settings</li>
  <li><i class="fa fa-home"></i>Home</li>
  <li><i class="fa fa-user"></i>Account</li>
  <li><i class="fa fa-cart"></i>Cart</li>
</ul>

Upvotes: 2

Related Questions