pseudo element

Report · Jul 25, 2019

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>

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

How would I do?

Global Invisible Hand

Hosun Kang

Report · Jul 25, 2019

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

Report · Jul 25, 2019

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 25, 2019

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.

Report · Jul 25, 2019

Hi,

What's the difference between the two links to fontawesome?

Hosun Kang

Report · Jul 25, 2019

The first one is version 4.7 and the second one is version 5.6 with integrity checks. Use only 1 Font Awesome library --- usually the latest one.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 25, 2019

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:

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jul 25, 2019

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:

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jul 26, 2019

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.

pseudo element

1 Correct answer