RocketTheme - TOPIC: Icons in list using Font Awesome still showing basic bullets

Welcome Guest! Login

0 items Join Now

- DingoBlue
- Rocketeer
- Posts: 71
- Thanks: 1
Icons in list using Font Awesome still showing basic bullets

Posted 11 years 5 months ago
- I cannot get the Font Awseome icons to display properly in a list and am looking for any help - PLEASE. I am going mad because I know I am missing something really simple!
 
 I am using Leviathan ver 1.3
 The site where I am having the issue is www.treesandroots.net
 The area where I am doing the testing is the bottom left of the page - "The Undisputed Facts".
 There you can see that a regular (basic) bullet point is being display as well as the tick (icon-ok). I only want the icon-ok image to display (replace the basic bullet).
 
 The html I am using is:
 
 <ul class="icons">
 <li>No other trees</li>
 <li>No underground streams</li>
 <li>No soil erosion</li>
 <li>No soil - on top of sandstone ridge</li>
 <li>No rock slides</li>
 <li>No subsidence</li>
 <li>Clearly visible large roots going under home</li>
 <li>Cracks originating directly above root entry</li>
 <li>Upward bowing of reinforced beam directly above root entry</li>
 </ul>
 
 I have also tried:
 
 <ul class="icons">
 <li>No other trees</li>
 <li>No underground streams</li>
 <li>No soil erosion</li>
 <li>No soil - on top of sandstone ridge</li>
 <li>No rock slides</li>
 <li>No subsidence</li>
 <li>Clearly visible large roots going under home</li>
 <li>Cracks originating directly above root entry</li>
 <li>Upward bowing of reinforced beam directly above root entry</li>
 </ul>
 
 The effect is the same (unchanged).
 
 I am not using any special editor so the html is not being stripped.
 
 ANY help would be appreciated.
 Thank you.
#1048322
- DingoBlue
- Rocketeer
- Posts: 71
- Thanks: 1
Re: Icons in list using Font Awesome still showing basic bullets

Posted 11 years 5 months ago
- Sorry - forgot to mention...
  Joomla 2.5.16
  Gantry 4.1.10
  
  Regards
#1048329
- DingoBlue
- Rocketeer
- Posts: 71
- Thanks: 1
Re: Icons in list using Font Awesome still showing basic bullets

Posted 11 years 5 months ago
- Anyone able to help?
#1048555

Ben Lee
Elite Rocketeer
Posts: 4193
Thanks: 42

Re: Icons in list using Font Awesome still showing basic bullets

Posted 11 years 5 months ago

You're probably seeing the list bullets because you have list tags that are supposed to show bullets. You also had a missing closed span tag. Try just using spans and a line break at the end, like this:

<p>
<span class="icon-ok">No other trees</span><br />
<span class="icon-ok">No underground streams</span><br />
<span class="icon-ok">No soil erosion</span><br />
<span class="icon-ok">No soil - on top of sandstone ridge</span><br />
<span class="icon-ok">No rock slides</span><br />
<span class="icon-ok">No subsidence</span><br />
<span class="icon-ok">Clearly visible large roots going under home</span><br />
<span class="icon-ok">Cracks originating directly above root entry</span><br />
<span class="icon-ok">Upward bowing of reinforced beam directly above root entry</span><br />
</p>

#1048561

- DingoBlue
- Rocketeer
- Posts: 71
- Thanks: 1
Re: Icons in list using Font Awesome still showing basic bullets

Posted 11 years 5 months ago
- Hi Ben,
  Thank you for looking at this for me. I suspect my missing span tag was a result of trying all sorts of variations - well spotted.
  
  I tried your suggested code, you can see the result on the page. Unfortunately it doesn't produce a nice indented "bullet" list like the ul and li approach does.
  
  There must be a way to integrate Font Awesome icons into a list - the RocketTheme instructions within the RT template typography pages do not seem to produce the desired results.
#1048569
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
Re: Icons in list using Font Awesome still showing basic bullets

Posted 11 years 4 months ago
- There is a lot that you can do with css, so I'd recommend figuring out how you want to style things and then add some custom css either through inline styling or through adding a custom css stylesheet and adding your own style tweaks there.
 
 If you stick with the paragraph and the spans, you just need to add a margin to the left for the paragraph.
 
 
 To add that same styling in custom css and use it in your article, just add this to your custom stylesheet:
 .my-list-class { margin-left: 15px; }
 
 and add this to your list:
 
#1048714
- DingoBlue
- Rocketeer
- Posts: 71
- Thanks: 1
Re: Icons in list using Font Awesome still showing basic bullets

Posted 11 years 4 months ago
- Hi Ben,
 I thought about using a css after your previous message. I subsequently found the following solution in another post and it works perfectly. I claim no credit for the following - someone else found it
 
 Place the following css in the customised template file...
 
 ul.my-custom-list{
 list-style: none; /* remove default bullets */
 }
 
 ul.my-custom-list li{
 position: relative;
 }
 
 ul.my-custom-list i{
 position: absolute;
 left: -25px; /* left icon position, you may need to change this value */
 top: 3px;
 }
 
 .... in the bullets include:
 
 <ul class="my-custom-list">
 
 Here is a sample that worked for me:
 
 <ul class="my-custom-list">
 <li>No other trees</li>
 <li>No underground streams</li>
 <li>No soil erosion</li>
 <li>No soil - on top of sandstone ridge</li>
 <li>No rock slides</li>
 <li>No subsidence</li>
 <li>Clearly visible large roots going under home</li>
 <li>Cracks originating directly above root entry</li>
 <li>Upward bowing of reinforced beam directly above root entry</li>
 </ul>
 
 Thank you for following up, it is appreciated.
 Regards
#1048841

Time to create page: 0.089 seconds