- This topic has 7 replies, 4 voices, and was last updated 7 months, 2 weeks ago by
Tom.
-
AuthorPosts
-
May 30, 2020 at 4:42 pm #1308182
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%;
}May 30, 2020 at 8:10 pm #1308237Leo
StaffCustomer SupportHi there,
Would something like this help?
https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-listDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 31, 2020 at 4:00 am #1308479Alan
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.
May 31, 2020 at 6:47 am #1308603David
StaffCustomer SupportHi 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/May 31, 2020 at 7:19 am #1308636Alan
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/
May 31, 2020 at 2:25 pm #1309135Tom
Lead DeveloperLead DeveloperHi 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-developmentMay 31, 2020 at 5:08 pm #1309214Alan
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;
}June 1, 2020 at 9:28 am #1310063Tom
Lead DeveloperLead DeveloperGlad we could help 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.