Font Awesome stacked images in html list -


i'm trying use font awesome stacked images in list described in example page http://fontawesome.io/examples/

list:

<ul class="fa-ul">   <li><i class="fa-li fa fa-check-square"></i>list icons</li> </ul> 

stacked images:

<span class="fa-stack fa-lg">   <i class="fa fa-camera fa-stack-1x"></i>   <i class="fa fa-ban fa-stack-2x text-danger"></i> </span> 

i can't images aligned correctly, can see in fiddle:

https://jsfiddle.net/uql4alyj/

does know how aligned correctly?

thank in advance

max

this happening because .fa-stack class applies height, width , line-height of 2em stacked set of icons. quick way ensure non-stacked icons aligned stacked icons treat non-stacked icons one-icon stack themselves.

you can achieve changing current markup of:

<li>   <i class="fa fa-camera-retro"></i>   text </li> 

to:

<li>   <span class="fa-stack">     <i class="fa fa-camera-retro fa-stack-1x"></i>   </span>   text </li> 

modified jsfiddle demo.


Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -