<SOLVED>Question about class and css

[ysco]

Hello All,

 

I have a question how to define a class= from a .tpl into the css file to style it.

I have a bootstrap template and i added this into a .tpl

 

        <ul>
        
        <li><i class="fa fa-shield"></i>&nbsp  {l s='Personalized and secure access' mod='onepagecheckout'}</li>
        <li><i class="fa fa-external-link"></i>&nbsp  {l s='Fast and easy check out' mod='onepagecheckout'}</li>
        <li><i class="fa fa-thumbs-o-up"></i>&nbsp  {l s='Het sparen van loyaliteitspunten' mod='onepagecheckout'}</li>
        <li><i class="fa fa-tags"></i>&nbsp  {l s='Het gebruik van waardebonnen' mod='onepagecheckout'}</li>
        <li><i class="fa fa-user"></i>&nbsp  {l s='Het beheren van uw account' mod='onepagecheckout'}</li>
        
        </ul>

 

The class i used in this case are from font away some, this shows some icons on FO .

 

I added this line on top off the .tpl file ": <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> "

 

The icons are loaded and shows correct on FO, problem is that the text after each icon differs and are not aligned all the same.

So i thought i add the class into css to align them all but i do not get it working.

 

I try't the first class and added this piece off code in .css

 

.fa fa-shield

{

color: red;

}

 

The color i have used to see on FO if something changed but the above does not work.

 

I also try't this

 

i .fa fa-shield

{

color: red;

}

 

What do i miss ??

 

Is it important in which .css file i add this code ?

 

I try,t it on module .css on theme global.css but none is working.

 

I attached a screenshot what i want to change.

 

Hope someone can point me in the right direction how to solve this

 

Thanks.

 

Best regards,

 

ysco..

Edited May 27, 2014 by ysco (see edit history)

[ysco]

Never mind i fixed it already.

No need to add the class to css to style it.

 

I added to <i class="fa fa-shield"> this fa-fw like this <i class="fa fa-shield fa-fw"> now all are aligned .

 

Best regards,

 

ysco..