Skip to content
Say hello to Web Awesome, the biggest and best library of open-source web components.
Pre-order today!

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.

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 PrefixIcon StyleSVG + JS FilenameWeb Font FilenameAvailability
fabBrandsbrands.jsfa-brands-400.*Free
fas or faSolidsolid.jsfa-solid-900.*Free
farRegularregular.jsfa-regular-400.*Pro only
falLightlight.jsfa-light-300.*Pro only
fadDuotoneduotone.jsfa-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

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, 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.

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.

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";
}

Icon Name Changes Between Version 4 and 5

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 PrefixUnicode value
500px500pxfabf26e
address-book-oaddress-bookfarf2b9
address-card-oaddress-cardfarf2bb
adnadnfabf170
amazonamazonfabf270
androidandroidfabf17b
angellistangellistfabf209
appleapplefabf179
area-chartchart-areafasf1fe
arrow-circle-o-downarrow-alt-circle-downfarf358
arrow-circle-o-leftarrow-alt-circle-leftfarf359
arrow-circle-o-rightarrow-alt-circle-rightfarf35a
arrow-circle-o-uparrow-alt-circle-upfarf35b
arrowsarrows-altfasf0b2
arrows-altexpand-arrows-altfasf31e
arrows-harrows-alt-hfasf337
arrows-varrows-alt-vfasf338
asl-interpretingamerican-sign-language-interpretingfasf2a3
automobilecarfasf1b9
bandcampbandcampfabf2d5
bankuniversityfasf19c
bar-chartchart-barfarf080
bar-chart-ochart-barfarf080
bathtubbathfasf2cd
batterybattery-fullfasf240
battery-0battery-emptyfasf244
battery-1battery-quarterfasf243
battery-2battery-halffasf242
battery-3battery-three-quartersfasf241
battery-4battery-fullfasf240
behancebehancefabf1b4
behance-squarebehance-squarefabf1b5
bell-obellfarf0f3
bell-slash-obell-slashfarf1f6
bitbucketbitbucketfabf171
bitbucket-squarebitbucketfabf171
bitcoinbtcfabf15a
black-tieblack-tiefabf27e
bluetoothbluetoothfabf293
bluetooth-bbluetooth-bfabf294
bookmark-obookmarkfarf02e
btcbtcfabf15a
building-obuildingfarf1ad
buyselladsbuyselladsfabf20d
cabtaxifasf1ba
calendarcalendar-altfasf073
calendar-check-ocalendar-checkfarf274
calendar-minus-ocalendar-minusfarf272
calendar-ocalendarfarf133
calendar-plus-ocalendar-plusfarf271
calendar-times-ocalendar-timesfarf273
caret-square-o-downcaret-square-downfarf150
caret-square-o-leftcaret-square-leftfarf191
caret-square-o-rightcaret-square-rightfarf152
caret-square-o-upcaret-square-upfarf151
ccclosed-captioningfarf20a
cc-amexcc-amexfabf1f3
cc-diners-clubcc-diners-clubfabf24c
cc-discovercc-discoverfabf1f2
cc-jcbcc-jcbfabf24b
cc-mastercardcc-mastercardfabf1f1
cc-paypalcc-paypalfabf1f4
cc-stripecc-stripefabf1f5
cc-visacc-visafabf1f0
chainlinkfasf0c1
chain-brokenunlinkfasf127
check-circle-ocheck-circlefarf058
check-square-ocheck-squarefarf14a
chromechromefabf268
circle-ocirclefarf111
circle-o-notchcircle-notchfasf1ce
circle-thincirclefarf111
clipboardclipboardfarf328
clock-oclockfarf017
cloneclonefarf24d
closetimesfasf00d
cloud-downloadcloud-download-altfasf381
cloud-uploadcloud-upload-altfasf382
cnyyen-signfasf157
code-forkcode-branchfasf126
codepencodepenfabf1cb
codiepiecodiepiefabf284
comment-ocommentfarf075
commentingcomment-dotsfasf4ad
commenting-ocomment-dotsfarf4ad
comments-ocommentsfarf086
compasscompassfarf14e
connectdevelopconnectdevelopfabf20e
contaocontaofabf26d
copyrightcopyrightfarf1f9
creative-commonscreative-commonsfabf25e
credit-cardcredit-cardfarf09d
credit-card-altcredit-cardfasf09d
css3css3fabf13c
cutleryutensilsfasf2e7
dashboardtachometer-altfasf3fd
dashcubedashcubefabf210
deafnessdeaffasf2a4
dedentoutdentfasf03b
deliciousdeliciousfabf1a5
deviantartdeviantartfabf1bd
diamondgemfarf3a5
diggdiggfabf1a6
dollardollar-signfasf155
dot-circle-odot-circlefarf192
dribbbledribbblefabf17d
drivers-licenseid-cardfasf2c2
drivers-license-oid-cardfarf2c2
dropboxdropboxfabf16b
drupaldrupalfabf1a9
edgeedgefabf282
eercastsellcastfabf2da
empireempirefabf1d1
envelope-oenvelopefarf0e0
envelope-open-oenvelope-openfarf2b6
enviraenvirafabf299
etsyetsyfabf2d7
eureuro-signfasf153
euroeuro-signfasf153
exchangeexchange-altfasf362
expeditedsslexpeditedsslfabf23e
external-linkexternal-link-altfasf35d
external-link-squareexternal-link-square-altfasf360
eyeeyefarf06e
eye-slasheye-slashfarf070
eyedroppereye-dropperfasf1fb
fafont-awesomefabf2b4
facebookfacebook-ffabf39e
facebook-ffacebook-ffabf39e
facebook-officialfacebookfabf09a
facebook-squarefacebook-squarefabf082
feedrssfasf09e
file-archive-ofile-archivefarf1c6
file-audio-ofile-audiofarf1c7
file-code-ofile-codefarf1c9
file-excel-ofile-excelfarf1c3
file-image-ofile-imagefarf1c5
file-movie-ofile-videofarf1c8
file-ofilefarf15b
file-pdf-ofile-pdffarf1c1
file-photo-ofile-imagefarf1c5
file-picture-ofile-imagefarf1c5
file-powerpoint-ofile-powerpointfarf1c4
file-sound-ofile-audiofarf1c7
file-textfile-altfasf15c
file-text-ofile-altfarf15c
file-video-ofile-videofarf1c8
file-word-ofile-wordfarf1c2
file-zip-ofile-archivefarf1c6
files-ocopyfarf0c5
firefoxfirefoxfabf269
first-orderfirst-orderfabf2b0
flag-oflagfarf024
flashboltfasf0e7
flickrflickrfabf16e
floppy-osavefarf0c7
folder-ofolderfarf07b
folder-open-ofolder-openfarf07c
font-awesomefont-awesomefabf2b4
fonticonsfonticonsfabf280
fort-awesomefort-awesomefabf286
forumbeeforumbeefabf211
foursquarefoursquarefabf180
free-code-campfree-code-campfabf2c5
frown-ofrownfarf119
futbol-ofutbolfarf1e3
gbppound-signfasf154
geempirefabf1d1
gearcogfasf013
gearscogsfasf085
get-pocketget-pocketfabf265
ggggfabf260
gg-circlegg-circlefabf261
gitgitfabf1d3
git-squaregit-squarefabf1d2
githubgithubfabf09b
github-altgithub-altfabf113
github-squaregithub-squarefabf092
gitlabgitlabfabf296
gittipgratipayfabf184
glassglass-martinifasf000
glideglidefabf2a5
glide-gglide-gfabf2a6
googlegooglefabf1a0
google-plusgoogle-plus-gfabf0d5
google-plus-circlegoogle-plusfabf2b3
google-plus-officialgoogle-plusfabf2b3
google-plus-squaregoogle-plus-squarefabf0d4
google-walletgoogle-walletfabf1ee
gratipaygratipayfabf184
gravgravfabf2d6
groupusersfasf0c0
hacker-newshacker-newsfabf1d4
hand-grab-ohand-rockfarf255
hand-lizard-ohand-lizardfarf258
hand-o-downhand-point-downfarf0a7
hand-o-lefthand-point-leftfarf0a5
hand-o-righthand-point-rightfarf0a4
hand-o-uphand-point-upfarf0a6
hand-paper-ohand-paperfarf256
hand-peace-ohand-peacefarf25b
hand-pointer-ohand-pointerfarf25a
hand-rock-ohand-rockfarf255
hand-scissors-ohand-scissorsfarf257
hand-spock-ohand-spockfarf259
hand-stop-ohand-paperfarf256
handshake-ohandshakefarf2b5
hard-of-hearingdeaffasf2a4
hdd-ohddfarf0a0
headerheadingfasf1dc
heart-oheartfarf004
hospital-ohospitalfarf0f8
hotelbedfasf236
hourglass-1hourglass-startfasf251
hourglass-2hourglass-halffasf252
hourglass-3hourglass-endfasf253
hourglass-ohourglassfarf254
houzzhouzzfabf27c
html5html5fabf13b
id-badgeid-badgefarf2c1
id-card-oid-cardfarf2c2
ilsshekel-signfasf20b
imageimagefarf03e
imdbimdbfabf2d8
inrrupee-signfasf156
instagraminstagramfabf16d
institutionuniversityfasf19c
internet-explorerinternet-explorerfabf26b
intersextransgenderfasf224
ioxhostioxhostfabf208
joomlajoomlafabf1aa
jpyyen-signfasf157
jsfiddlejsfiddlefabf1cc
keyboard-okeyboardfarf11c
krwwon-signfasf159
lastfmlastfmfabf202
lastfm-squarelastfm-squarefabf203
leanpubleanpubfabf212
legalgavelfasf0e3
lemon-olemonfarf094
level-downlevel-down-altfasf3be
level-uplevel-up-altfasf3bf
life-bouylife-ringfarf1cd
life-buoylife-ringfarf1cd
life-ringlife-ringfarf1cd
life-saverlife-ringfarf1cd
lightbulb-olightbulbfarf0eb
line-chartchart-linefasf201
linkedinlinkedin-infabf0e1
linkedin-squarelinkedinfabf08c
linodelinodefabf2b8
linuxlinuxfabf17c
list-altlist-altfarf022
long-arrow-downlong-arrow-alt-downfasf309
long-arrow-leftlong-arrow-alt-leftfasf30a
long-arrow-rightlong-arrow-alt-rightfasf30b
long-arrow-uplong-arrow-alt-upfasf30c
mail-forwardsharefasf064
mail-replyreplyfasf3e5
mail-reply-allreply-allfasf122
map-markermap-marker-altfasf3c5
map-omapfarf279
maxcdnmaxcdnfabf136
meanpathfont-awesomefabf2b4
mediummediumfabf23a
meetupmeetupfabf2e0
meh-omehfarf11a
minus-square-ominus-squarefarf146
mixcloudmixcloudfabf289
mobilemobile-altfasf3cd
mobile-phonemobile-altfasf3cd
modxmodxfabf285
moneymoney-bill-altfarf3d1
moon-omoonfarf186
mortar-boardgraduation-capfasf19d
naviconbarsfasf0c9
newspaper-onewspaperfarf1ea
object-groupobject-groupfarf247
object-ungroupobject-ungroupfarf248
odnoklassnikiodnoklassnikifabf263
odnoklassniki-squareodnoklassniki-squarefabf264
opencartopencartfabf23d
openidopenidfabf19b
operaoperafabf26a
optin-monsteroptin-monsterfabf23c
pagelinespagelinesfabf18c
paper-plane-opaper-planefarf1d8
pasteclipboardfarf328
pause-circle-opause-circlefarf28b
paypalpaypalfabf1ed
pencilpencil-altfasf303
pencil-squarepen-squarefasf14b
pencil-square-oeditfarf044
photoimagefarf03e
picture-oimagefarf03e
pie-chartchart-piefasf200
pied-piperpied-piperfabf2ae
pied-piper-altpied-piper-altfabf1a8
pied-piper-pppied-piper-ppfabf1a7
pinterestpinterestfabf0d2
pinterest-ppinterest-pfabf231
pinterest-squarepinterest-squarefabf0d3
play-circle-oplay-circlefarf144
plus-square-oplus-squarefarf0fe
product-huntproduct-huntfabf288
qqqqfabf1d6
question-circle-oquestion-circlefarf059
quoraquorafabf2c4
rarebelfabf1d0
ravelryravelryfabf2d9
rebelrebelfabf1d0
redditredditfabf1a1
reddit-alienreddit-alienfabf281
reddit-squarereddit-squarefabf1a2
refreshsyncfasf021
registeredregisteredfarf25d
removetimesfasf00d
renrenrenrenfabf18b
reorderbarsfasf0c9
repeatredofasf01e
resistancerebelfabf1d0
rmbyen-signfasf157
rotate-leftundofasf0e2
rotate-rightredofasf01e
roubleruble-signfasf158
rubruble-signfasf158
rubleruble-signfasf158
rupeerupee-signfasf156
s15bathfasf2cd
safarisafarifabf267
scissorscutfasf0c4
scribdscribdfabf28a
sellsysellsyfabf213
sendpaper-planefasf1d8
send-opaper-planefarf1d8
share-square-oshare-squarefarf14d
shekelshekel-signfasf20b
sheqelshekel-signfasf20b
shieldshield-altfasf3ed
shirtsinbulkshirtsinbulkfabf214
sign-insign-in-altfasf2f6
sign-outsign-out-altfasf2f5
signingsign-languagefasf2a7
simplybuiltsimplybuiltfabf215
skyatlasskyatlasfabf216
skypeskypefabf17e
slackslackfabf198
sliderssliders-hfasf1de
slideshareslidesharefabf1e7
smile-osmilefarf118
snapchatsnapchatfabf2ab
snapchat-ghostsnapchat-ghostfabf2ac
snapchat-squaresnapchat-squarefabf2ad
snowflake-osnowflakefarf2dc
soccer-ball-ofutbolfarf1e3
sort-alpha-ascsort-alpha-downfasf15d
sort-alpha-descsort-alpha-upfasf15e
sort-amount-ascsort-amount-downfasf160
sort-amount-descsort-amount-upfasf161
sort-ascsort-upfasf0de
sort-descsort-downfasf0dd
sort-numeric-ascsort-numeric-downfasf162
sort-numeric-descsort-numeric-upfasf163
soundcloudsoundcloudfabf1be
spoonutensil-spoonfasf2e5
spotifyspotifyfabf1bc
square-osquarefarf0c8
stack-exchangestack-exchangefabf18d
stack-overflowstack-overflowfabf16c
star-half-emptystar-halffarf089
star-half-fullstar-halffarf089
star-half-ostar-halffarf089
star-ostarfarf005
steamsteamfabf1b6
steam-squaresteam-squarefabf1b7
sticky-note-osticky-notefarf249
stop-circle-ostop-circlefarf28d
stumbleuponstumbleuponfabf1a4
stumbleupon-circlestumbleupon-circlefabf1a3
sun-osunfarf185
superpowerssuperpowersfabf2dd
supportlife-ringfarf1cd
tablettablet-altfasf3fa
tachometertachometer-altfasf3fd
telegramtelegramfabf2c6
televisiontvfasf26c
tencent-weibotencent-weibofabf1d5
themeislethemeislefabf2b2
thermometerthermometer-fullfasf2c7
thermometer-0thermometer-emptyfasf2cb
thermometer-1thermometer-quarterfasf2ca
thermometer-2thermometer-halffasf2c9
thermometer-3thermometer-three-quartersfasf2c8
thermometer-4thermometer-fullfasf2c7
thumb-tackthumbtackfasf08d
thumbs-o-downthumbs-downfarf165
thumbs-o-upthumbs-upfarf164
ticketticket-altfasf3ff
times-circle-otimes-circlefarf057
times-rectanglewindow-closefasf410
times-rectangle-owindow-closefarf410
toggle-downcaret-square-downfarf150
toggle-leftcaret-square-leftfarf191
toggle-rightcaret-square-rightfarf152
toggle-upcaret-square-upfarf151
trashtrash-altfasf2ed
trash-otrash-altfarf2ed
trellotrellofabf181
tripadvisortripadvisorfabf262
trylira-signfasf195
tumblrtumblrfabf173
tumblr-squaretumblr-squarefabf174
turkish-liralira-signfasf195
twitchtwitchfabf1e8
twittertwitterfabf099
twitter-squaretwitter-squarefabf081
unsortedsortfasf0dc
usbusbfabf287
usddollar-signfasf155
user-circle-ouser-circlefarf2bd
user-ouserfarf007
vcardaddress-cardfasf2bb
vcard-oaddress-cardfarf2bb
viacoinviacoinfabf237
viadeoviadeofabf2a9
viadeo-squareviadeo-squarefabf2aa
video-cameravideofasf03d
vimeovimeo-vfabf27d
vimeo-squarevimeo-squarefabf194
vinevinefabf1ca
vkvkfabf189
volume-control-phonephone-volumefasf2a0
warningexclamation-trianglefasf071
wechatweixinfabf1d7
weiboweibofabf18a
weixinweixinfabf1d7
whatsappwhatsappfabf232
wheelchair-altaccessible-iconfabf368
wikipedia-wwikipedia-wfabf266
window-close-owindow-closefarf410
window-maximizewindow-maximizefarf2d0
window-restorewindow-restorefarf2d2
windowswindowsfabf17a
wonwon-signfasf159
wordpresswordpressfabf19a
wpbeginnerwpbeginnerfabf297
wpexplorerwpexplorerfabf2de
wpformswpformsfabf298
xingxingfabf168
xing-squarexing-squarefabf169
y-combinatory-combinatorfabf23b
y-combinator-squarehacker-newsfabf1d4
yahooyahoofabf19e
ycy-combinatorfabf23b
yc-squarehacker-newsfabf1d4
yelpyelpfabf1e9
yenyen-signfasf157
yoastyoastfabf2b1
youtubeyoutubefabf167
youtube-playyoutubefabf167
youtube-squareyoutube-squarefabf431

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.