Font Awesome

Add vector icons and social logos on the documentation with Font Awesome, the web's most popular icon set and toolkit.

You can use the free icons in this site. Click here to search for an icon.

Visual Studio Code

Use Font Awesome Auto-complete & Preview extension to be able to preview font awesome icons on VS Code builtin markdown preview.

It requires some additional configurations to render the icons in preview mode. Below lines have to be added settings.json of VS Code.

"markdown.styles": [
    "https://use.fontawesome.com/releases/v5.7.1/css/all.css"
],

After the extension is installed open File -> Preferences -> Settings. Then select Extensions -> Font awesome autocomplete configuration and click Edit in settings.json. Settings.json will be opened in a new tab. Add "**/*.md" to "fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns" and "fontAwesomeAutocomplete.patterns" sections. This configuration changes will enable VS Code to show preview of font awesome icons while you editing an md file.

Add an Icon

You need to enter HTML code to display a Font Awesome icon. There is multiple icon categories, but you can use only the free ones.

Style	Prefix	Example	Rendering
Solid	fas	<i class="fas fa-thumbs-up" />
Regular	fas	<i class="far fa-thumbs-up" />
Brands	fab	<i class="fab fa-windows" />