You're viewing docs for v5.15.4, an older version of Font Awesome.

Desktop

Use Glyphs

Since Font Awesome was released, we've supported copy and pasting glyphs of our icons into your favorite desktop apps. It's become the default way many designers and folks use our icons while working. Here's how to do it.

Advertisement

Heads up! We changed the unicode values of some of the icons!

In version 5.12.0 we began to use unicode codepoints that fell outside of the defined Private Use Area (PUA). We've corrected this in Version 5.14.0.

If you are using icons that were released in 5.12 or 5.13, you'll want to update your glyph's unicode values.

Open a Document in Your Desktop App

After completing the steps in getting started, open a new or existing document in the Desktop app you want to use Font Awesome icons in. We'll use a new document in Sketch App (opens new window) for the walkthrough below.

Create a New Text Layer

However your app allows you, create a new layer or text block to insert text into.

A new text layer created in a Sketch document

Set the Font/Typeface to Font Awesome 5

Next, using your app's font/typeface selector, find and select "Font Awesome 5 Free" or "Font Awesome 5 Pro" as the one you want to use for the current text layer/block. Remember, if you want to insert a brand icon, choose the "Font Awesome 5 Brands" font/typeface.

Selecting Font Awesome 5 Free

Copy an Icon's Glyph

Advertisement

Next, you're all set to reference the icon you want to use. First, find the icon and copy its glyph to your clipboard. We've got a couple of places, like on our icon gallery (with cheatsheet details turned on), any icon's details page, or our fan-favorite cheatsheet you can find those around the site.

Turn on cheatsheet details and select the clipboard under any icon in our gallery listing

Select the copy glyph button on any icon's details

Copy any icon on our cheatsheet manually

Then, paste the glyph of that icon into the text layer you've created.

question-circle's glyph pasted into the text layer renders the icon

Adjusting Styles/Weights

Font Awesome 5 comes in 4 styles/weights (plus our brands count as a fourth option). If you've installed all .otfs, you can change the weight of your text layer/block to switch between visual styles.

Switching from solid to regular style of question-circle

3 styles of question-circle

Exporting and Prepping for Production

Remember to convert these icon text layers to vector outlines or rasterized copies before using the document in some graphic/print design and even web-based production steps. Individuals and services/tools you may be using might not have access to the font files those text layers depend on to render things right.

Stop! Demo Time!

Advertisement

Need some examples to learn from or troubleshoot with? Download and check out these files we've prepped.

File What's It Do?
Sketch Glyphs Demo Several examples of styles and icons being referenced in Sketch App (opens new window) using Font Awesome 5's icons referenced by glyphs