Add Font Awesome Icon to Unordered List

[Alan]

Based on David’s css coding for an unordered list that changes the bullets to red circles, is there a relatively easy way to change the bullet to a Font Awesome icon?

Please let me know.

Thanks,

For unordered lists you would need to do this:

.entry-content ul li {
list-style: none;
position: relative;
}

.entry-content ul li:before {
content: “”;
position: absolute;
left: -1.5em;
top: 0.25em;
/* Adjust according to width and height */
width: 10px;
/* Change size */
height: 10px;
/* Match width */
background-color: red;
/* Set color */
border-radius: 50%;
}

[Leo]

Hi there,

Would something like this help?
https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alan]

I saw that on FA’s website, but since I have bullet lists on +/- 200 pages that I am moving over to GP, I was looking to handle that via CSS if possible.

[David]

Hi there,

you would use the FA Icons Unicodes within the CSS eg.

.entry-content ul li:before {
    content: "\f007"; /* FA - Unicode */
    font-family: "Font Awesome 5 Free"; /* Ensure correct font family for icon */

    /* rest of styles */
}

reference:

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alan]

David:

That is exactly what I was looking for…it will save me a lot of time. I uploaded and activated the FA plugin and set the unicode, but the icon is not appearing on the page.

My code is as follows:

.entry-content ul li:before {
content: “\f138”; /* FA – Unicode */
font-family: “Font Awesome 5 Free”; /* Ensure correct font family for icon */
/* rest of styles */
position: absolute;
left: -1.5em;
top: 0.125em;
background-color: #003f87;
}

You can see an example page here https://savacaystage.wpengine.com/destinations/ecuador-tours-travel/banos/

[Tom]

Hi there,

Try this instead:

.entry-content ul li {
    position: relative;
}

.entry-content ul li:before {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: -1.5em;
    top: 0.125em;
    color: #003f87;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alan]

Tom:

I was able to get it to work by removing the existing styling for the unordered list and then adding font-weight: 900; which I found in a Github Font Awesome Forum. This has saved me a lot of work, so thank you…

ul {
list-style: none;
}
.entry-content ul li {
position: relative;
}
.entry-content ul li:before {
content: “\f138”;
font-family: “Font Awesome 5 Free”;
position: absolute;
left: -1.5em;
top: 0.125em;
font-weight: 900;
color: #003f87;
}

[Tom]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts