Archived topic
Add Font Awesome Icon to Unordered List
7 replies · Started by Alan on May 30, 2020
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%;
}
Hi there,
Would something like this help?
https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list
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.
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
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/
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;
}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;
}
Glad we could help :)
