FontAwesome CSS

Nack's Avatar

Nack

05 Oct, 2019 05:41 PM

Hello,
I am having a difficult time loading "_FontAwesome.ttf" font icons on the cards.
I understand that I can use .svg instead but would prefer to use them as fonts.
Thank you in advance.

CSS ----------
@font-face {font-family: fontAwesome; src: url("_FontAwesome.tff"); }

  1. Support Staff 1 Posted by Damien Elmes on 05 Oct, 2019 10:22 PM

    Damien Elmes's Avatar

    That looks correct - you will also need to ensure the file is in your media folder and your cards are using "fontAwesome". If it still doesn't work, it may be that the file is in the wrong format.

  2. 2 Posted by Nack on 06 Oct, 2019 05:20 AM

    Nack's Avatar

    Thanks, Damien. The file is in the media folder. Other fonts I have installed in the system work perfectly. I think the file is in the right format but not entirely sure. I will upload the _FontAwesome.ttf that I am using

    CSS ---------
    .targetIcon {font-family: fontAwesome; font-weight: 400; font-size: 25px;}

  3. Support Staff 3 Posted by Damien Elmes on 06 Oct, 2019 10:07 PM

    Damien Elmes's Avatar

    Hi Nack,

    The code you included here looks ok to me. I'm afraid if it's not working, the font may not be in a format Anki's web libraries accepts. If you try a different font file and that does work, that would seem to back up that assumption.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Screen_Shot_2019-10-06_at_2.34.16.png 16.9 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac