FontAwesome icons as background on Tags page (tiles)

quizquack

Hello!

I've been trying to see if I can use a font-awesome icon as the background to a tile on the tags page.

For example, to specific the third tile, I've used:

.TagTile.colored:nth-child(3):before

This works to a degree, but if for example I use:

.TagTile.colored:nth-child(3):before {

content: "\fa12";
font-family: FontAwesome;

}

I end up with strange characters or blank spaces, and not the specified icon.

Any help appreciated!

[deleted]

quizquack Assuming your font library is indeed called FontAwesome, try

.TagTile.colored:nth-child(3):before {

content: "\fa12";
font-family: "FontAwesome";

}

quizquack

Actually this did work in the end!

.TagTile.colored:nth-child(1):before {
    content: "\f007" !important;
    font-family: 'Font Awesome 5 Free';
    font-size: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: rgba(255,255,255,0.1);
}

But it only seems to work for some icons and not others? i.e. \f007 above works fine, but \f44e doesn't?

[deleted]

quizquack This really depends on the icon you've chosen - it may not be actually available in the free set. For example, this works

h3.TagTile-name:before {
    content: "\f0f3";
    font-family: 'Font Awesome 5 Free';
}

quizquack

Thanks [deleted] , do you know how then I could utilise some of the fontawesome icons in this way that are already used elsewhere on my site?

For example, f0f3 is available (on the fontawesome site it's labelled free) but f0e7 doesn't work, yet is also on FontAwesome as a free icon and is used elsewhere on my flarum forum (as a tag in the more general sense)

quizquack

May have answered my own question.... 🙂. I needed to add the correct font-weight depending on the icon being used! As per: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

[deleted]

quizquack That was going to be my next suggestion... 🙂
Typically, you need to specify the weight to get the icon style you want, so for example, 400 would be light, 600 would standard, etc...