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

Web

Upgrade From Version 4

Are you using Font Awesome 4 on a project and ready to upgrade? Version 5 has been re-written and re-designed completely from scratch. We've tried to keep things as similar as possible to version 4, but there are a few differences to keep in mind when upgrading. Here's how to move to the latest and greatest.

Advertisement

Upgrading Quickly and Easily with Kits

Our Kits come with version 4 compatibility included - which manages the toughest parts of upgrading for you automatically. Create a kit, add its Kit embed code to your project, and we'll take care of the following:

Auto-mapping Old Icon Names

Kits' version 4 compatibility handles any references to older version icon names or aliases that have been changed.

Always Loading Your Kit's Version of Font Awesome

Your project may still have CSS that references the old font-family name, a common scenario when your project depends on other themes or plugins that load their own, older versions of Font Awesome. If we find any of those, we’ll override them to use the newer version of Font Awesome you’ve configured. This will also guarantee that any CSS pseudo-element rules you've set use the proper icon.

What's Changed From Version 4 to 5?

3 Different Icon Styles

We introduced a solid, regular, and light style of every icon in Font Awesome. We also separated out brand icons into their own style/category for easier use. We needed a way to reference a particular style when an icon is called in markup. It's still the case that for each icon you want to use, you need to 1) specify the icon's name and 2) use the proper prefix. Version 4 just had one prefix — fa. Version 5 has four prefixes to let us set the style of any icon easily:

New Prefix Icon Style SVG + JS Filename Web Font Filename Availability
fab Brands brands.js fa-brands-400.* Free
fas or fa Solid solid.js fa-solid-900.* Free
far Regular regular.js fa-regular-400.* Pro only
fal Light light.js fa-light-300.* Pro only
fad Duotone duotone.js fa-duotone-900.* Pro only
  <!-- Version 4's syntax -->
  <i class="fa fa-camera-retro"></i>

  <!-- version 6's syntax -->
  <i class="fas fa-camera-retro"></i>

  <!-- example: regular style of camera-retro -->
  <i class="far fa-camera-retro"></i>

  <!-- example: light style of camera-retro -->
  <i class="fal fa-camera-retro"></i>

Icon Name Changes

We removed aliases in version 5, each icon has one official name and some of those names have been adjusted under our new standard and conventions.

Outline Style Icons

Similarly, all icons that had an outlined style (and usually ended with -o) now have a prefix of far and have had their -o suffix removed.

Upgrading Manually

Advertisement

1. Remove Version 4 Assets & References**

Remove the files associated with Font Awesome Version 4 from your project - including the fontawesome/ folder that contains web fonts (fontawesome/fonts/), CSS (fontawesome/css), and pre-processor options (fontawesome/less and fontawesome/scss). If you’re using version 4's CDN (opens new window), you can skip this step.

Next, remove references to version 4's CSS or JS from the <head> of your templates/pages' HTML, including any references to version 4's CDN (opens new window).

2. Set up Version 5 Assets & Add References

Check out our getting started details to walk through how to set up Font Awesome 5. You can use our Kits, download and host things yourself, or install Font Awesome through a package manager now.

3. Use Our Shim for More Support

Need some extra help and assurance that your existing icons will render without issue? We’ve created shim files to use as band-aids until you get the time to do a proper upgrade. Our v4 shims allow you to keep your old version 4 icon names, aliases, and syntax while mapping version 5 icons to your current references.

If you want to use them, you'll need to add an additional line to your Version 5 references. Here's an example using version 5's CDN:

  <head>
    <link rel="stylesheet" href="path_to_css_files/css/all.css">
    <link rel="stylesheet" href="path_to_css_files/css/v4-shims.css">
  </head>
  <body>
    <!-- "close" is an alias to "xmark", Version 6 is <i class="fa fa-xmark"></i> -->
    <i class="fa fa-close"></i>

    <!-- Renamed to "image", V5 is <i class="fa fa-image"></i> -->
    <i class="fa fa-picture"></i>

    <!-- Needs the "fab" prefix, V5 <i class="fab fa-twitter"></i> -->
    <i class="fa fa-twitter"></i>

    <!-- "far" prefix, lose the "-o", V5 <i class="far fa-circle"></i> -->
    <i class="fa fa-circle-o"></i>
  </body>

The v4-shim is available to use in both our Web Fonts + CSS and SVG + JS Frameworks. If you're using our new and fancy SVG + JS way of rendering icons, just switch the /css/all.css reference to /js/all.js as well as /css/v4-shims.css to /js/v4-shims.js. Here's the example above switched to use our SVG + JS framework instead.

  <head>
    <script defer src="https://path_to_js_files/js/all.js"></script>
    <script defer src="https://path_to_js_files/js/v4-shims.js"></script>
  </head>
  <body>
    <!-- your existing Version 4 icon references here... -->
  </body>

4. Update Styling

Update any custom styling you’ve added around Font Awesome icons (if applicable) including any rules you've set defining Unicode values that may have changed with CSS pseudo-elements.

5. Double Check Your Project's UI

Buy a friend a coffee and have them go through your project’s pages and views to make sure all icons are rendering as expected. Also, a staging or development version of your project is a great place to do this.

Don't cross streams!

After conferring with Dr. Spengler, we don't recommend using both Font Awesome 4 and 6 side-by-side on a project. It will cause huge CSS and path collisions, and we can't promise icons will render as you or we expect. If you can't remove older version references, we recommend starting a new project for testing the beta or waiting until version 6 is fully released.

6. Update CSS Pseudo-element Rules

If you're using CSS pseudo-elements with version 4, upgrading to version 5 requires a fair amount of manual work. Below are the steps you'll need to follow:

  • Update the font-family value - You'll want to make sure you change the font-family to reference the new version of Font Awesome 5.
  • Set a font-weight with each icon-based rule - You'll also need to set a font-weight since version 5 has multiple styles mapped to different weights.
  /* general styling shared between versions */
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  /* version 4's styling (using calendar-o) */
  .calendar::before {
    font-family: FontAwesome;
    content: "\f133";
  }

  /* version 5's styling (using updated regular style of calendar) */
  .calendar::before {
    font-family: "Font Awesome 5 Free";  /* updated font-family */
    font-weight: 400; /* regular style/weight */
    content: "\f133";
  }

Using pseudo-elements and want to switch to SVG + JS method?

You'll need to complete a few additional steps to get up and running.

Icon Name Changes Between Version 4 and 5

Advertisement

Here's the list of all of the icons that have been renamed according to version 5's standards and conventions. Keep in mind you'll need to change all brand icons from version 4 to use the new fab prefix instead of the old fa prefix.

Old Icon Name or Alias (Version 4) New Icon Name (Version 5) New Icon Prefix Unicode value
500px 500px fab f26e
address-book-o address-book far f2b9
address-card-o address-card far f2bb
adn adn fab f170
amazon amazon fab f270
android android fab f17b
angellist angellist fab f209
apple apple fab f179
area-chart chart-area fas f1fe
arrow-circle-o-down arrow-alt-circle-down far f358
arrow-circle-o-left arrow-alt-circle-left far f359
arrow-circle-o-right arrow-alt-circle-right far f35a
arrow-circle-o-up arrow-alt-circle-up far f35b
arrows arrows-alt fas f0b2
arrows-alt expand-arrows-alt fas f31e
arrows-h arrows-alt-h fas f337
arrows-v arrows-alt-v fas f338
asl-interpreting american-sign-language-interpreting fas f2a3
automobile car fas f1b9
bandcamp bandcamp fab f2d5
bank university fas f19c
bar-chart chart-bar far f080
bar-chart-o chart-bar far f080
bathtub bath fas f2cd
battery battery-full fas f240
battery-0 battery-empty fas f244
battery-1 battery-quarter fas f243
battery-2 battery-half fas f242
battery-3 battery-three-quarters fas f241
battery-4 battery-full fas f240
behance behance fab f1b4
behance-square behance-square fab f1b5
bell-o bell far f0f3
bell-slash-o bell-slash far f1f6
bitbucket bitbucket fab f171
bitbucket-square bitbucket fab f171
bitcoin btc fab f15a
black-tie black-tie fab f27e
bluetooth bluetooth fab f293
bluetooth-b bluetooth-b fab f294
bookmark-o bookmark far f02e
btc btc fab f15a
building-o building far f1ad
buysellads buysellads fab f20d
cab taxi fas f1ba
calendar calendar-alt fas f073
calendar-check-o calendar-check far f274
calendar-minus-o calendar-minus far f272
calendar-o calendar far f133
calendar-plus-o calendar-plus far f271
calendar-times-o calendar-times far f273
caret-square-o-down caret-square-down far f150
caret-square-o-left caret-square-left far f191
caret-square-o-right caret-square-right far f152
caret-square-o-up caret-square-up far f151
cc closed-captioning far f20a
cc-amex cc-amex fab f1f3
cc-diners-club cc-diners-club fab f24c
cc-discover cc-discover fab f1f2
cc-jcb cc-jcb fab f24b
cc-mastercard cc-mastercard fab f1f1
cc-paypal cc-paypal fab f1f4
cc-stripe cc-stripe fab f1f5
cc-visa cc-visa fab f1f0
chain link fas f0c1
chain-broken unlink fas f127
check-circle-o check-circle far f058
check-square-o check-square far f14a
chrome chrome fab f268
circle-o circle far f111
circle-o-notch circle-notch fas f1ce
circle-thin circle far f111
clipboard clipboard far f328
clock-o clock far f017
clone clone far f24d
close times fas f00d
cloud-download cloud-download-alt fas f381
cloud-upload cloud-upload-alt fas f382
cny yen-sign fas f157
code-fork code-branch fas f126
codepen codepen fab f1cb
codiepie codiepie fab f284
comment-o comment far f075
commenting comment-dots fas f4ad
commenting-o comment-dots far f4ad
comments-o comments far f086
compass compass far f14e
connectdevelop connectdevelop fab f20e
contao contao fab f26d
copyright copyright far f1f9
creative-commons creative-commons fab f25e
credit-card credit-card far f09d
credit-card-alt credit-card fas f09d
css3 css3 fab f13c
cutlery utensils fas f2e7
dashboard tachometer-alt fas f3fd
dashcube dashcube fab f210
deafness deaf fas f2a4
dedent outdent fas f03b
delicious delicious fab f1a5
deviantart deviantart fab f1bd
diamond gem far f3a5
digg digg fab f1a6
dollar dollar-sign fas f155
dot-circle-o dot-circle far f192
dribbble dribbble fab f17d
drivers-license id-card fas f2c2
drivers-license-o id-card far f2c2
dropbox dropbox fab f16b
drupal drupal fab f1a9
edge edge fab f282
eercast sellcast fab f2da
empire empire fab f1d1
envelope-o envelope far f0e0
envelope-open-o envelope-open far f2b6
envira envira fab f299
etsy etsy fab f2d7
eur euro-sign fas f153
euro euro-sign fas f153
exchange exchange-alt fas f362
expeditedssl expeditedssl fab f23e
external-link external-link-alt fas f35d
external-link-square external-link-square-alt fas f360
eye eye far f06e
eye-slash eye-slash far f070
eyedropper eye-dropper fas f1fb
fa font-awesome fab f2b4
facebook facebook-f fab f39e
facebook-f facebook-f fab f39e
facebook-official facebook fab f09a
facebook-square facebook-square fab f082
feed rss fas f09e
file-archive-o file-archive far f1c6
file-audio-o file-audio far f1c7
file-code-o file-code far f1c9
file-excel-o file-excel far f1c3
file-image-o file-image far f1c5
file-movie-o file-video far f1c8
file-o file far f15b
file-pdf-o file-pdf far f1c1
file-photo-o file-image far f1c5
file-picture-o file-image far f1c5
file-powerpoint-o file-powerpoint far f1c4
file-sound-o file-audio far f1c7
file-text file-alt fas f15c
file-text-o file-alt far f15c
file-video-o file-video far f1c8
file-word-o file-word far f1c2
file-zip-o file-archive far f1c6
files-o copy far f0c5
firefox firefox fab f269
first-order first-order fab f2b0
flag-o flag far f024
flash bolt fas f0e7
flickr flickr fab f16e
floppy-o save far f0c7
folder-o folder far f07b
folder-open-o folder-open far f07c
font-awesome font-awesome fab f2b4
fonticons fonticons fab f280
fort-awesome fort-awesome fab f286
forumbee forumbee fab f211
foursquare foursquare fab f180
free-code-camp free-code-camp fab f2c5
frown-o frown far f119
futbol-o futbol far f1e3
gbp pound-sign fas f154
ge empire fab f1d1
gear cog fas f013
gears cogs fas f085
get-pocket get-pocket fab f265
gg gg fab f260
gg-circle gg-circle fab f261
git git fab f1d3
git-square git-square fab f1d2
github github fab f09b
github-alt github-alt fab f113
github-square github-square fab f092
gitlab gitlab fab f296
gittip gratipay fab f184
glass glass-martini fas f000
glide glide fab f2a5
glide-g glide-g fab f2a6
google google fab f1a0
google-plus google-plus-g fab f0d5
google-plus-circle google-plus fab f2b3
google-plus-official google-plus fab f2b3
google-plus-square google-plus-square fab f0d4
google-wallet google-wallet fab f1ee
gratipay gratipay fab f184
grav grav fab f2d6
group users fas f0c0
hacker-news hacker-news fab f1d4
hand-grab-o hand-rock far f255
hand-lizard-o hand-lizard far f258
hand-o-down hand-point-down far f0a7
hand-o-left hand-point-left far f0a5
hand-o-right hand-point-right far f0a4
hand-o-up hand-point-up far f0a6
hand-paper-o hand-paper far f256
hand-peace-o hand-peace far f25b
hand-pointer-o hand-pointer far f25a
hand-rock-o hand-rock far f255
hand-scissors-o hand-scissors far f257
hand-spock-o hand-spock far f259
hand-stop-o hand-paper far f256
handshake-o handshake far f2b5
hard-of-hearing deaf fas f2a4
hdd-o hdd far f0a0
header heading fas f1dc
heart-o heart far f004
hospital-o hospital far f0f8
hotel bed fas f236
hourglass-1 hourglass-start fas f251
hourglass-2 hourglass-half fas f252
hourglass-3 hourglass-end fas f253
hourglass-o hourglass far f254
houzz houzz fab f27c
html5 html5 fab f13b
id-badge id-badge far f2c1
id-card-o id-card far f2c2
ils shekel-sign fas f20b
image image far f03e
imdb imdb fab f2d8
inr rupee-sign fas f156
instagram instagram fab f16d
institution university fas f19c
internet-explorer internet-explorer fab f26b
intersex transgender fas f224
ioxhost ioxhost fab f208
joomla joomla fab f1aa
jpy yen-sign fas f157
jsfiddle jsfiddle fab f1cc
keyboard-o keyboard far f11c
krw won-sign fas f159
lastfm lastfm fab f202
lastfm-square lastfm-square fab f203
leanpub leanpub fab f212
legal gavel fas f0e3
lemon-o lemon far f094
level-down level-down-alt fas f3be
level-up level-up-alt fas f3bf
life-bouy life-ring far f1cd
life-buoy life-ring far f1cd
life-ring life-ring far f1cd
life-saver life-ring far f1cd
lightbulb-o lightbulb far f0eb
line-chart chart-line fas f201
linkedin linkedin-in fab f0e1
linkedin-square linkedin fab f08c
linode linode fab f2b8
linux linux fab f17c
list-alt list-alt far f022
long-arrow-down long-arrow-alt-down fas f309
long-arrow-left long-arrow-alt-left fas f30a
long-arrow-right long-arrow-alt-right fas f30b
long-arrow-up long-arrow-alt-up fas f30c
mail-forward share fas f064
mail-reply reply fas f3e5
mail-reply-all reply-all fas f122
map-marker map-marker-alt fas f3c5
map-o map far f279
maxcdn maxcdn fab f136
meanpath font-awesome fab f2b4
medium medium fab f23a
meetup meetup fab f2e0
meh-o meh far f11a
minus-square-o minus-square far f146
mixcloud mixcloud fab f289
mobile mobile-alt fas f3cd
mobile-phone mobile-alt fas f3cd
modx modx fab f285
money money-bill-alt far f3d1
moon-o moon far f186
mortar-board graduation-cap fas f19d
navicon bars fas f0c9
newspaper-o newspaper far f1ea
object-group object-group far f247
object-ungroup object-ungroup far f248
odnoklassniki odnoklassniki fab f263
odnoklassniki-square odnoklassniki-square fab f264
opencart opencart fab f23d
openid openid fab f19b
opera opera fab f26a
optin-monster optin-monster fab f23c
pagelines pagelines fab f18c
paper-plane-o paper-plane far f1d8
paste clipboard far f328
pause-circle-o pause-circle far f28b
paypal paypal fab f1ed
pencil pencil-alt fas f303
pencil-square pen-square fas f14b
pencil-square-o edit far f044
photo image far f03e
picture-o image far f03e
pie-chart chart-pie fas f200
pied-piper pied-piper fab f2ae
pied-piper-alt pied-piper-alt fab f1a8
pied-piper-pp pied-piper-pp fab f1a7
pinterest pinterest fab f0d2
pinterest-p pinterest-p fab f231
pinterest-square pinterest-square fab f0d3
play-circle-o play-circle far f144
plus-square-o plus-square far f0fe
product-hunt product-hunt fab f288
qq qq fab f1d6
question-circle-o question-circle far f059
quora quora fab f2c4
ra rebel fab f1d0
ravelry ravelry fab f2d9
rebel rebel fab f1d0
reddit reddit fab f1a1
reddit-alien reddit-alien fab f281
reddit-square reddit-square fab f1a2
refresh sync fas f021
registered registered far f25d
remove times fas f00d
renren renren fab f18b
reorder bars fas f0c9
repeat redo fas f01e
resistance rebel fab f1d0
rmb yen-sign fas f157
rotate-left undo fas f0e2
rotate-right redo fas f01e
rouble ruble-sign fas f158
rub ruble-sign fas f158
ruble ruble-sign fas f158
rupee rupee-sign fas f156
s15 bath fas f2cd
safari safari fab f267
scissors cut fas f0c4
scribd scribd fab f28a
sellsy sellsy fab f213
send paper-plane fas f1d8
send-o paper-plane far f1d8
share-square-o share-square far f14d
shekel shekel-sign fas f20b
sheqel shekel-sign fas f20b
shield shield-alt fas f3ed
shirtsinbulk shirtsinbulk fab f214
sign-in sign-in-alt fas f2f6
sign-out sign-out-alt fas f2f5
signing sign-language fas f2a7
simplybuilt simplybuilt fab f215
skyatlas skyatlas fab f216
skype skype fab f17e
slack slack fab f198
sliders sliders-h fas f1de
slideshare slideshare fab f1e7
smile-o smile far f118
snapchat snapchat fab f2ab
snapchat-ghost snapchat-ghost fab f2ac
snapchat-square snapchat-square fab f2ad
snowflake-o snowflake far f2dc
soccer-ball-o futbol far f1e3
sort-alpha-asc sort-alpha-down fas f15d
sort-alpha-desc sort-alpha-up fas f15e
sort-amount-asc sort-amount-down fas f160
sort-amount-desc sort-amount-up fas f161
sort-asc sort-up fas f0de
sort-desc sort-down fas f0dd
sort-numeric-asc sort-numeric-down fas f162
sort-numeric-desc sort-numeric-up fas f163
soundcloud soundcloud fab f1be
spoon utensil-spoon fas f2e5
spotify spotify fab f1bc
square-o square far f0c8
stack-exchange stack-exchange fab f18d
stack-overflow stack-overflow fab f16c
star-half-empty star-half far f089
star-half-full star-half far f089
star-half-o star-half far f089
star-o star far f005
steam steam fab f1b6
steam-square steam-square fab f1b7
sticky-note-o sticky-note far f249
stop-circle-o stop-circle far f28d
stumbleupon stumbleupon fab f1a4
stumbleupon-circle stumbleupon-circle fab f1a3
sun-o sun far f185
superpowers superpowers fab f2dd
support life-ring far f1cd
tablet tablet-alt fas f3fa
tachometer tachometer-alt fas f3fd
telegram telegram fab f2c6
television tv fas f26c
tencent-weibo tencent-weibo fab f1d5
themeisle themeisle fab f2b2
thermometer thermometer-full fas f2c7
thermometer-0 thermometer-empty fas f2cb
thermometer-1 thermometer-quarter fas f2ca
thermometer-2 thermometer-half fas f2c9
thermometer-3 thermometer-three-quarters fas f2c8
thermometer-4 thermometer-full fas f2c7
thumb-tack thumbtack fas f08d
thumbs-o-down thumbs-down far f165
thumbs-o-up thumbs-up far f164
ticket ticket-alt fas f3ff
times-circle-o times-circle far f057
times-rectangle window-close fas f410
times-rectangle-o window-close far f410
toggle-down caret-square-down far f150
toggle-left caret-square-left far f191
toggle-right caret-square-right far f152
toggle-up caret-square-up far f151
trash trash-alt fas f2ed
trash-o trash-alt far f2ed
trello trello fab f181
tripadvisor tripadvisor fab f262
try lira-sign fas f195
tumblr tumblr fab f173
tumblr-square tumblr-square fab f174
turkish-lira lira-sign fas f195
twitch twitch fab f1e8
twitter twitter fab f099
twitter-square twitter-square fab f081
unsorted sort fas f0dc
usb usb fab f287
usd dollar-sign fas f155
user-circle-o user-circle far f2bd
user-o user far f007
vcard address-card fas f2bb
vcard-o address-card far f2bb
viacoin viacoin fab f237
viadeo viadeo fab f2a9
viadeo-square viadeo-square fab f2aa
video-camera video fas f03d
vimeo vimeo-v fab f27d
vimeo-square vimeo-square fab f194
vine vine fab f1ca
vk vk fab f189
volume-control-phone phone-volume fas f2a0
warning exclamation-triangle fas f071
wechat weixin fab f1d7
weibo weibo fab f18a
weixin weixin fab f1d7
whatsapp whatsapp fab f232
wheelchair-alt accessible-icon fab f368
wikipedia-w wikipedia-w fab f266
window-close-o window-close far f410
window-maximize window-maximize far f2d0
window-restore window-restore far f2d2
windows windows fab f17a
won won-sign fas f159
wordpress wordpress fab f19a
wpbeginner wpbeginner fab f297
wpexplorer wpexplorer fab f2de
wpforms wpforms fab f298
xing xing fab f168
xing-square xing-square fab f169
y-combinator y-combinator fab f23b
y-combinator-square hacker-news fab f1d4
yahoo yahoo fab f19e
yc y-combinator fab f23b
yc-square hacker-news fab f1d4
yelp yelp fab f1e9
yen yen-sign fas f157
yoast yoast fab f2b1
youtube youtube fab f167
youtube-play youtube fab f167
youtube-square youtube-square fab f431

Next Steps

Running into trouble? Check out our troubleshooting guide for answers to common questions about using Font Awesome on the web. All set? Then check out and enjoy all of the new icons added to version 5.