SOLVED Using Font Awesome icons in a bulleted list
-
-
- Hector Bolanos
- Jr. Rocketeer
- Posts: 21
- Thanks: 0
-
[Edited: I posted a week ago! Can someone help me please? Thanks! ]
Hello,
I am using using the general Gantry Framework template and customizing it for our needs (on a Joomla 3.1 website).
I would like to know how to replace the bullets in a list (say within an article or a module) with Font Awesome icons.
In the Font Awesome documentation, it suggests using a code like this...<ul> <li><i class="icon-ok"></i><strong>Original wisdom by BL</strong><br /><span>2.5 - 3 hours of new videos each month.<br /></span></li>
However, this produces the following...
This image is hidden for guests.
Please log in or register to see it.
As you can see, the Font Awesome icon is placed as part of the text, after the bullet point, which is evidently not what I want.
Does the CSS need to be modified so that bullet points in a list can be replaced by Font Awesome icons? If so, I would be very grateful if someone can help me with such code
In case you need to have a look at the website, the url is www.barrylong.tv/index.php/home
Thanks a lot!
Hector - Last Edit: 10 years 5 months ago by Hector Bolanos.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
Use this code instead
<li class="icon-ok"><strong>Original wisdom by BL</strong><br><span>2.5 - 3 hours of new videos each month.<br></span></li>
and do that for every LI in this list - Check my services at: Mihha-Vision
-
-
-
- Hector Bolanos
- Jr. Rocketeer
- Posts: 21
- Thanks: 0
-
Hi Igor,
Many thanks for getting back to me.
I tried what you suggested...
<ul>
<li class="icon-ok"><strong>Original wisdom by BL</strong><br />2.5 - 3 hours of new videos each month.</li>
<li class="icon-ok"><strong>Watch at any time</strong><br />Watch the videos whenever you want to.</li>
<li class="icon-ok"><strong>Access to the archive</strong><br /> Watch the videos released up to 3 months before you joined.</li>
<li class="icon-ok"><strong>Member discounts and benefits:</strong><br />Receive special discounts to other BL materials.</li>
</ul>
but as you can see on the "Become a member!" module in the page: www.barrylong.tv/index.php/home , it didn't work.
What do you suggest I do?
Thanks,
Hector
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
- Add BR tag after every end line. If you take a closer look, you don't have them now in all LI tags
- Check my services at: Mihha-Vision
-
-
-
- Hector Bolanos
- Jr. Rocketeer
- Posts: 21
- Thanks: 0
-
Hi Igor,
Thanks for your reply. Sorry it took me a while to get back to you.
The solution you suggested doesn't seem to work for me. Whenever I add the BR tag at the end of each line, it is removed by the JCE editor I use on Joomla 3.1
Is there a workaround for this?
(Unfortunately, the project I was working on is no longer available. But I tried your solution on this page: www.afamela.org/index.php/inicio in the module that you will find on the bottom right with the heading "Recursos"). It is just not working for me, so I removed the fontawesome icons altogether
Thanks,
Hector
-
-
-
- Popovici Milenko
- Newbie
- Posts: 5
- Thanks: 0
-
Simply remove the default bullet styles. However your icons will still be placed inside the list, and not outside like the bullets. One way to put them outside is re-position them with CSS:
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: -32px; /* left icon position, you may need to change this value */ top: 5px; }
And also apply the .my-custom-list class to your list container in your HTML markup:
<ul class="my-custom-list"> ...
-
-
-
- Hector Bolanos
- Jr. Rocketeer
- Posts: 21
- Thanks: 0
-
Thank you Milenko
I added the custom CSS you suggested and applied the .my-custom-list class to the html markup:
<ul class="my-custom-list"> <li class="icon-ok">Directorio de miembros</li> <li class="icon-ok">Disposiciones</li> <li class="icon-ok">Organizaciones y Asociaciones</li> <li class="icon-ok">Mapa del sitio</li> </ul>
but as you can see in the bottom right module (called "Recursos") on the page ( www.afamela.org/index.php/inicio ), the list is not ordering itself as it should.
What am I missing? Sorry about this...
Hector
-
-
-
- Popovici Milenko
- Newbie
- Posts: 5
- Thanks: 0
-
Your list items are inline. Display them as blocks instead:
ul.my-custom-list li{ display:block; }
-
-
-
- Hector Bolanos
- Jr. Rocketeer
- Posts: 21
- Thanks: 0
-
Hi Milenko,
It worked! Many thanks!!!
Kind regards,
Hector
-
-
-
- boernik
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
-
Hi, I followed these instructions and it works. But the icon is very closed to the text.
How can I increase the space between the icon and the text?
All margin and padding values affect the complete line icluding the text:
2in1web.de/zusatzleistungen
-
Time to create page: 0.068 seconds