Font-awesome li:before

Beginners
1

I want the existing font-awesome i within each li now to be a :before.
How do get the find the fa icon within PG? My css is below the html.

<div class="pricing-box"><span class="price">Choose Your Option</span>
    <h2>Tax Deductions</h2>
    <ul>
        <li>
            <i class="fa-arrow-alt-circle-right far"></i>Once-a-year membership donation.
        </li>
        <li>
            <i class="fa-arrow-alt-circle-right far"></i> of a particular Poetry.LA series or a single episode for screen credit:
        </li>
        <ul>
            <li>
                <i class="fa-hand-point-right far"></i>PPoetry.LA Interview Series hosted by Mariano Zaro
            </li>
            <li>
                <i class="fa-edit far"></i>PA Poem By hosted by Lisa Grove
            </li>
            <li>
                <i class="fa-moon far"></i>They Write by Night hosted by Suzanne Lummis
        </ul>         
    </ul><span class="pricing-table-divider"></span><a class="btn" href="#"><b>Sign Up</b></a><span class="pricing-table-divider"></span>
</div>

.pricing-box ul:first-child:before {
    font-family: font-awesome;
    font-weight: 900;
    content: "";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
2

Hi @kat,

<i class="fa-arrow-alt-circle-right far"> needs to be <i class="far fa-arrow-alt-circle-right">

Don’t know if your using Bootstrap or else, but this is a general way of doing it. :before is used for other purposes in CSS.

You just place your icon before the text (like you did) of the navigation and make them show inline with the text.

1 Like
3

That works!

  1. How do I recolor bottom 3 li FA icons?
  2. Still like to know how I place an FA in ::before.

Not using Bootstrap, just html, css & js.

<div class="pricing-box"><span class="price">Choose Your Option</span> <h2>Tax Deductions</h2> <ul> <li> <i class="far fa-arrow-alt-circle-right"></i> Once-a-year membership donation. </li> <li> <i class="far fa-arrow-alt-circle-right"></i> A particular Poetry.LA series or a single episode for screen credit: </li> <ul> <li> <i class="far fa-hand-point-right"></i> Poetry.LA Interview Series hosted by Mariano Zaro </li> <li> <i class="far fa-edit"></i> A Poem By hosted by Lisa Grove </li> <li> <i class="far fa-moon"></i> They Write by Night hosted by Suzanne Lummis </ul> </ul><a class="btn" href="#"><b>Sign Up</b></a> </div>

Screen Shot 2022-01-31 at 9.57.23 AM
Screen Shot 2022-01-31 at 9.57.23 AM441Ă—550 36.7 KB

4

@kat

You find the font code to put in your before by visiting FontAwesome’s website. This icon’s unicode is at the top f0a9 so your code will be the following…

ul li::before {
  content: '\f0a9';
  font-family: font-awesome; /* <-- Assuming you know this for certain */
  color: red; /* <-- whatever color you want */
  ...
}
1 Like
5

I had hoped that I could get the specific FA I wanted inside pinegrow, rather than going to the FA site, getting the icon and code, but guess not. So thanks for the clarification @fakesamgregory.

6

@kat by selecting the element, you should see it in the style inspector (see image). If you don’t see it then click on “Show X more rules from all.css”.

I just pointed you to the documentation as it’s always good practice to look at the documentation :slight_smile:

image
image1890Ă—778 115 KB

1 Like
7

Seems I would first have to have the FA in a non :before to be able to get the name and content. Then I could use that to put it into a :before.

8

FA isn’t HTML or CSS code; it’s just part of the name of the icon (FontAwesome names all of its icons like that). It has no formatting effect on its own. The icon will appear on your page only if you’ve previously declared where to get the icon. This is only needed once per page.

If you can see the icons, that means the page already has the right declaration or Javascript. To change the icon color, specify color as a style for the < i >:

<i class="far fa-arrow-alt-circle-right" style="color: blue"></i>

No need for :before. You can change everything about the icon including its size and position by editing the quoted bit of the CSS class and style attributes.

1 Like
9

I had tried a :before for an FA, it did nothing exciting.

10

@kat exactly. That’s why we use documentation. I’m not quite sure what you’re expecting? Some browser or documentation from within Pinegrow?

1 Like