[Resolved] Add Font Awesome Icon to Unordered List

Home Forums Support Add Font Awesome Icon to Unordered List

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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%;
    }

    #1308237
    Leo
    Staff
    Customer Support
    #1308479
    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.

    #1308603
    David
    Staff
    Customer Support

    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

    #1308636
    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/

    #1309135
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1309214
    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;
    }

    #1310063
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.