Use FontAwesome in Obsidian

Custom CSS & Theme Design
1

Does anyone have any idea how to use it? Currently I use the Windows icons, but it is not so pretty.


/* Nav File Icon */
.nav-file-title::before {
    content: '📄';
}
/* Nav Folder Icon */
.nav-folder-title::before {
    content: '💼';
}
2

If you install the font awesome font on your system (or import it as a web font), you can reference the unicode character of the icon you want:

.nav-file-title::before {
    content: '\f15b';
}

Screen Shot 2021-01-01 at 10.46.09 AM
Screen Shot 2021-01-01 at 10.46.09 AM1206×280 12.3 KB

1 Like
3 
.nav-file-title::before {
    font-family: 'Font Awesome 5 Free Regular';
    content: '\f15b';
}

That worked, thx!

1 Like
4

While this approach uses CSS for styling the UI, here’s an experimental plugin to use FontAwesome (and other icon sets) directly within your Obsidian notes. Obsidian Icons Plugin – Use Icons in your Obsidian Notes

Let me know what you think!

2 Likes