Skip to main content
Hosun
Hosun
Inspiring
Jul 25, 2019 9:44 PM UTC
Answered

pseudo element

Hi,

I want to add the pdf icon next to "Writing 1".

I wrote

.col1 .line1 a::after {

content: '\f1c1';

font-family: 'Font Awesome 5 Free';

font-size: 16px;

font-weight: 400;

}

But it doesn't work.

I added in <head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

But two icons in <header> don't work.

How would I do?

Global Invisible Hand

Hosun Kang

This topic is closed to new replies. Start a new post to keep the conversation going.
osgood_Correct answer
Legend
Jul 25, 2019 10:14 PM UTC

If l remember correctly you have the font awesome  4 css library linked to your page not font awesome 5. I would just insert the tag much like you did for the Twitter icon using the font awesome 4 class for the pdf icon, which can be found by Googling font awesome 4 and then searching the icons on the website

View reply

8 replies

osgood_
Legend
Jul 26, 2019 7:55 AM UTC

I just tested your original code using font-awesome 5 using your page code/links/css and it works for me, the pdf icon shows.

Translate
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    Jul 25, 2019 10:50 PM UTC

    I think that you should refine the style rules somewhat. Have a look at the following CSS

    .pdf:after {

      font-family: FontAwesome;

      content: "\00a0\f1c1";

      padding-left: 4px;

    }

    The markup will look like:

    <p class="pdf">Writing 1</p>

    The end result:

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      Jul 25, 2019 10:55 PM UTC

      Just in case you want to link to a PDF file, the following may be of more interest:

      a[href$=".pdf"]:after {

        font-family: FontAwesome;

        content: "\00a0\f1c1";

        padding-left: 4px;

      }

      The markup:

      <a href="writing_1.pdf">Writing 1</a>

      The result:

      Translate
      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        osgood_Correct answer
        Legend
        Jul 25, 2019 10:14 PM UTC

        If l remember correctly you have the font awesome  4 css library linked to your page not font awesome 5. I would just insert the tag much like you did for the Twitter icon using the font awesome 4 class for the pdf icon, which can be found by Googling font awesome 4 and then searching the icons on the website

        Translate
          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          Jul 25, 2019 10:56 PM UTC

          I agree with osgood.  Keep this simple.  Use the <i> tag as you did before with Twitter and e-mail icons. 

          Translate
          Nancy O'Shea— Product User & Community Expert
            osgood_
            Legend
            Jul 25, 2019 11:16 PM UTC

            Another possibility why the code doesnt work could be that the pdf icon is classified as a brand in v5

            Font Awesome 5 Brand instead of Font Awesome 5 Free however l couldnt check that or if the unicode was correct because the icon page on the awesome webpage doesnt work in andriod, just shows a blank page.

            Either way l would stick to one workflow 4 or 5 and one implementation tag or css.

            Translate
            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices