Using font-awesome icons

Questions & Help
1

How could I put an icon (like from font-awesome) in a page?

Would it be better to use the Unicode glyph and change the font somehow? Or is better to go the “web way” and include the css in every page?

I have a “sources” section in some pages, and I want to be able to put the icon from the source (the pdf icon if its a pdf, the youtube icon if its a video from youtube, etc.)

2

The icon: property currently supports emojis and Unicode glyphs.

If you use a font that doesn’t support the Unicode glyph, it will just show up as an ‘x’. Emojis are supported in default font
image

To use glyphs, you need to use a font that supports it, like any of the nerd fonts. For example, install the Nerd fonts package for your system then add the following to /logseq/custom.css

:root {
  --ct-text-size: 14px;
  --ct-line-height: 1.6;
  --ls-font-family: "FontAwesome", sans-serif;
  --ct-page-title-font-family: var(--ls-font-family);
  --ct-code-font-family: "Ubuntu Nerd Font";
}

in this example, I am using FontAwesome
image

3 Likes
3

I knew about the icons, and it was working with Emojis fine. It’s working now with glyphs too, thank you very much!

Btw, my config (which uses the system default font) is:

:root {
    --ct-text-size: 14px;
    --ct-line-height: 1.6;
    --ls-font-family: "Symbols Nerd Font", "FontAwesome", sans-serif; 
    --ct-page-title-font-family: var(--ls-font-family);
    --ct-code-font-family: monospace;
}
2 Likes