CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
João Serra
João Serra

Reputation: 519

Font Awesome Icons in Side menu not alligned

Hi everyone i have a problem with my SideMenu I'm using the Klorofil template and Font Awesome for fonts the big problem is that in my side menu, if i have an icon that's smaller then the text is also pushed a bit to the left, the two noticable examples here are the "Taxonomy" and "Pricings" options where the text is too much to the left.

How do you guys make menus like this ensuring that they are centered?

I've created a small jsFiddle https://jsfiddle.net/2m0uec86/1/ with a mock of this very sidebar, any help would be appreciated, again the whole point is to just make it so that the text is always aligned, regardless of the size of the icon i use.

<div id="clubPages" class="collapse">
                        <ul class="nav">
                            <li><a href="#"><i class="fa fa-bullseye" aria-hidden="true"></i> <span>All Clubs</span></a></li>
                            <li>
                                <a href="#" data-toggle="collapse" data-target="#paymentPages" class="collapsed"><i class="fa fa-money" aria-hidden="true"></i> <span>Payment</span> <i class="icon-submenu glyphicon glyphicon-chevron-left"></i></a>
                                <div id="paymentPages" class="collapse third-collapse">
                                    <ul class="nav">
                                        <li><a href="#"><i class="fa fa-credit-card" aria-hidden="true"></i> <span>Methods</span></a></li>
                                        <li><a href="#"><i class="fa fa-eur" aria-hidden="true"></i> Pricings</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

In the above HTML for instance the "Pricings" part shows the text misaligned.

enter image description here

Upvotes: 0

Views: 1370

Answers (3)

Guillaume Serrat
Guillaume Serrat

Reputation: 165

The .fa-fw is used to align icons that don't have the same width.

Use the .fa-fw to set a fixed with on same level icons.

NOTE: Sub level icons wont be aligned to the parent icons. Only same level icons will.

See http://fontawesome.io/examples/ for more information on the Fixed Width Icons helper.

Upvotes: 2

Dalin Huang
Dalin Huang

Reputation: 11342

To debug, you can add the following, and you can easily see that it is not the text too short causing the problem, it is the FA icon are not wrapped, therefore it is not centralized and width are vary.

https://jsfiddle.net/dalinhuang/rnL7jgta/ (here you can easily see why you have the problem. check solution below)

/* test border block */
* {
    border: 1px solid red;
}

A quick fix will be adding this icon wraper to css:

.icon {
  text-align: center;
    display: inline-block;
    width: 30px;
}

And update around line 48

<div class="icon">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</div> <span>Taxonomy</span>

result:

https://jsfiddle.net/dalinhuang/rracqL2e/2/

Upvotes: 0

K K
K K

Reputation: 18109

Add this rule in CSS:

#clubPages ul li i{min-width:30px;}

Basically, you are giving telling the text to start rendering after certain gap from the icon irrespective of the icon width. Make sure the min-width is greater than the width of icons.

Upvotes: 0

Related Questions