Since your theme comes with Fontawesome preinstalled so I was wondering how do I use it? I wanted to add a icon before a list item but it's not displaying the icon properly

I've added this to base.css

.file-item::before {
content: "\f15b";
}

On firefox it just shows as this
list firefox

On chrome it's just a square
list chrome

Hardcoding the icons to a twig file works just by adding
<i class="fas fa-file"></i>

I was going to hardcode for the list item but there's no twig file for file-item so I had to go the CSS route but it doesn't work

CommentFileSizeAuthor
list-chrome.png12.3 KBruriko
list.png11.51 KBruriko

Comments

ruriko created an issue. See original summary.

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Status: Active » Needs review

The issue is that the pseudo-element is not using the Font Awesome font family. The `content` property only outputs the Unicode character, and without the correct font declaration the browser renders it as a regular glyph (a square or an unknown character).

Try adding the Font Awesome font family and weight to the pseudo-element, for example:

CSS

.file-item::before {
  content: "\f15b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
}

The exact font family may depend on the version of Font Awesome bundled with the theme. Since `<i class="fas fa-file"></i>` works correctly, the font assets are loading properly, but the pseudo-element does not automatically inherit the Font Awesome font.

If the theme is using SVG+JS instead of the webfont version of Font Awesome, pseudo-elements may not work without additional configuration. It would also be helpful to inspect the generated CSS to verify which Font Awesome version and font family names are being loaded by the theme.

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Version: 1.4.3 » 1.4.x-dev
Status: Needs review » Closed (works as designed)

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.