nitbit

Free Pro Icons from Font Awesome

2 months ago

26/10/2024

Ask yourself: would you rather seek vigilantism against profit-driven consumer exploitation... or something, or the more lawful option, deprived by a senseless dependence on Creative Commons and other publicly licensed work to provide you with just palatable options, always chasing a pipe dream of your design ideals? Bro overcooked 💀

Before you continue, consider actually free alternatives: Flaticon, Iconscout, Octicons, Codicon.

Option 1: Use a link

Find the pro icon you want from Font Awesome.

Copy the HTML.

Right click on the large icon, view page source, and find and copy the URL https://site-assets.fontawesome.com/releases/vx.y.z/css/all.css
Include this link using the <link> tag to use your chosen icon like any other free icon. For example,

<link href="https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css" rel="stylesheet">
<div>frying an egg sunny-side up <i class="fa-regular fa-pan-frying"></i></div>

Option 2: Use a local file

Download the file which your icon is located. Update the version in the url to the latest if necessary. You can change the extension to ttf to download the ttf file instead.

Then use it like a font and type out the icon's unicode prefixed with &#x. The unicode for the icon can be copied from Font Awesome. You can also Copy Glyph and use that instead.

<style>
  @font-face {
      font-family:"Font Awesome 6 Pro"; /* name it anything */
      font-style:normal;
      font-weight:400;
      font-display:block;
      src: url(../assets/fa-sharp-regular-400.woff2) format("woff2");
      /* format is "truetype" for ttf files */
  }
</style>

<style>
  .my-icons{
      font-family: "Font Awesome 6 Pro";
  }
</style>
<span class="my-icons">&#x(unicode);</span>
<!-- write your icon's unicode in &#x(unicode); -->

Alternatively, do it the same way they do on the actual website.

<style>
  .snowflake:before{
      font-family: "Font Awesome 6 Pro";
      content:'\f2dc'; /* put the unicode after `\` */
  }
</style>
<div><span class="snowflake"></span></div>

Option 3: Download an icon

Backtrack to Option 2 to download the files, except change the extension to ttf.

Open the TTF file with FontForge.
In the gallery, under Encoding choose Compact to remove empty glyphs (icons).

Under View choose Goto and input the name of your icon.

Double click the icon to open the editor, then under File (in the editor) choose Export and configure the icon's name and change the format to SVG, then save it to your desired location. There's your SVG. Open it in a browser to see it.

Use the SVG directly!

<img src="name.svg" alt="my svg"/>