3 See the [CHANGELOG.md](./CHANGELOG.md) for detailed information about what has changed between versions.
5 This guide is useful to figure out what you need to do between breaking changes.
7 As always, [submit issues](https://github.com/FortAwesome/Font-Awesome/issues/new) that you run into with this guide or with these upgrades to us.
11 ## 5.12.x/5.13.x to 5.14.0
13 In version 5.12.0 and 5.13.0 some of the icons were assigned unicode values
14 that were outside the Private Unicode Area (PUA). This caused problems with
15 some desktop software and caused the icons to show up as Chinese, Japanese, or
16 Korean (CJK) ideographs.
18 The unicode values have been re-assigned to values within the PUA range.
20 If you were using any of the following icons with pseudo-elements you will need
21 to change the CSS `content` value to the new unicode value.
23 | Icon name | Old | New |
24 | ---------------------- | ---- | ---- |
25 | bacteria | f959 | e059 |
26 | bacterium | f95a | e05a |
27 | box-tissue | f95b | e05b |
28 | caravan-alt | f900 | e000 |
29 | cat-space | f901 | e001 |
30 | coffee-pot | f902 | e002 |
31 | coffin-cross | f951 | e051 |
32 | comet | f903 | e003 |
33 | dailymotion | f952 | e052 |
34 | deezer | f977 | e077 |
35 | edge-legacy | f978 | e078 |
36 | fan-table | f904 | e004 |
37 | faucet | f905 | e005 |
38 | faucet-drip | f906 | e006 |
39 | firefox-browser | f907 | e007 |
40 | folder-download | f953 | e053 |
41 | folder-upload | f954 | e054 |
42 | galaxy | f908 | e008 |
43 | garage | f909 | e009 |
44 | garage-car | f90a | e00a |
45 | garage-open | f90b | e00b |
46 | google-pay | f979 | e079 |
47 | hand-holding-medical | f95c | e05c |
48 | hand-sparkles | f95d | e05d |
49 | hands-wash | f95e | e05e |
50 | handshake-alt-slash | f95f | e05f |
51 | handshake-slash | f960 | e060 |
52 | head-side-cough | f961 | e061 |
53 | head-side-cough-slash | f962 | e062 |
54 | head-side-mask | f963 | e063 |
55 | head-side-virus | f964 | e064 |
56 | heat | f90c | e00c |
57 | house | f90d | e00d |
58 | house-day | f90e | e00e |
59 | house-leave | f90f | e00f |
60 | house-night | f910 | e010 |
61 | house-return | f911 | e011 |
62 | house-signal | f912 | e012 |
63 | house-user | f965 | e065 |
64 | ideal | f913 | e013 |
65 | instagram-square | f955 | e055 |
66 | lamp-desk | f914 | e014 |
67 | lamp-floor | f915 | e015 |
68 | laptop-house | f966 | e066 |
69 | light-ceiling | f916 | e016 |
70 | light-switch | f917 | e017 |
71 | light-switch-off | f918 | e018 |
72 | light-switch-on | f919 | e019 |
73 | lungs-virus | f967 | e067 |
74 | microblog | f91a | e01a |
75 | microwave | f91b | e01b |
76 | mixer | f956 | e056 |
77 | outlet | f91c | e01c |
78 | oven | f91d | e01d |
79 | people-arrows | f968 | e068 |
80 | pied-piper-square | f91e | e01e |
81 | plane-slash | f969 | e069 |
82 | planet-moon | f91f | e01f |
83 | planet-ringed | f920 | e020 |
84 | police-box | f921 | e021 |
85 | portal-enter | f922 | e022 |
86 | portal-exit | f923 | e023 |
87 | pump-medical | f96a | e06a |
88 | pump-soap | f96b | e06b |
89 | radar | f924 | e024 |
90 | raygun | f925 | e025 |
91 | refrigerator | f926 | e026 |
92 | rocket-launch | f927 | e027 |
93 | rust | f97a | e07a |
94 | sensor | f928 | e028 |
95 | sensor-alert | f929 | e029 |
96 | sensor-fire | f92a | e02a |
97 | sensor-on | f92b | e02b |
98 | sensor-smoke | f92c | e02c |
99 | shield-virus | f96c | e06c |
100 | shopify | f957 | e057 |
101 | sink | f96d | e06d |
102 | siren | f92d | e02d |
103 | siren-on | f92e | e02e |
104 | soap | f96e | e06e |
105 | solar-system | f92f | e02f |
106 | sort-circle | f930 | e030 |
107 | sort-circle-down | f931 | e031 |
108 | sort-circle-up | f932 | e032 |
109 | space-station-moon | f933 | e033 |
110 | space-station-moon-alt | f934 | e034 |
111 | sprinkler | f935 | e035 |
112 | star-shooting | f936 | e036 |
113 | starfighter | f937 | e037 |
114 | starfighter-alt | f938 | e038 |
115 | starship | f939 | e039 |
116 | starship-freighter | f93a | e03a |
117 | stopwatch-20 | f96f | e06f |
118 | store-alt-slash | f970 | e070 |
119 | store-slash | f971 | e071 |
120 | sword-laser | f93b | e03b |
121 | sword-laser-alt | f93c | e03c |
122 | swords-laser | f93d | e03d |
123 | telescope | f93e | e03e |
124 | temperature-down | f93f | e03f |
125 | temperature-up | f940 | e040 |
126 | tiktok | f97b | e07b |
127 | toilet-paper-slash | f972 | e072 |
128 | trailer | f941 | e041 |
129 | transporter | f942 | e042 |
130 | transporter-1 | f943 | e043 |
131 | transporter-2 | f944 | e044 |
132 | transporter-3 | f945 | e045 |
133 | transporter-empty | f946 | e046 |
134 | ufo | f947 | e047 |
135 | ufo-beam | f948 | e048 |
136 | unity | f949 | e049 |
137 | unsplash | f97c | e07c |
138 | user-alien | f94a | e04a |
139 | user-robot | f94b | e04b |
140 | user-unlock | f958 | e058 |
141 | user-visor | f94c | e04c |
142 | users-slash | f973 | e073 |
143 | vacuum | f94d | e04d |
144 | vacuum-robot | f94e | e04e |
145 | virus | f974 | e074 |
146 | virus-slash | f975 | e075 |
147 | viruses | f976 | e076 |
148 | window-frame | f94f | e04f |
149 | window-frame-open | f950 | e050 |
155 There are no breaking changes in this version upgrade.
161 There are no breaking changes in this version upgrade.
167 There are no breaking changes in this version upgrade.
173 The 9-pointed icon named "haykal" was renamed to "bahai" to better match the
174 symbol. If you were previously using the misnamed icon rename to "bahai" when
181 The scanner-image icon was previously using the same unicode value as the scanner icon.
183 This has now been fixed and the scanner-image icon has a unique unicode value.
185 The film-canister icon was misspelled as "film-cannister". This has been fixed.
191 There are no breaking changes in this version upgrade.
197 There are no breaking changes in this version upgrade.
203 There are no breaking changes in this version upgrade.
209 The Sass function `fa-content-secondary` which was part of the `duotone.scss`
210 file has been removed due to its inconsistent behavior in different versions of
211 Sass pre-processors. Specifically [`node-sass`](https://github.com/sass/node-sass) and
212 [`sass`](https://github.com/sass/dart-sass) didn't produce the same output.
218 The following icon shims have been changed to better match the original version 4 icon:
228 The nintendo-switch icon has been removed by legal request of Nintendo of America Inc.
230 Font Awesome is no longer able to provide icons related to Nintendo, their
231 gaming consoles, accessories, or games.
237 There are no breaking changes in this version upgrade.
243 There are no breaking changes in this version upgrade.
249 ### Removing title elements from SVG sprites
251 Since the initial release of version 5, all the way back to 5.0.0 actually,
252 we've included `<title>` elements in the SVG sprites.
254 In https://github.com/FortAwesome/Font-Awesome/issues/14595 a discussion
255 outlines that this practice actually prevents normal efforts to make these
256 sprites accessible according to web accessibility standards.
258 If you are using sprites please refer to [our documentation on accessibility with Font Awesome](https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility).
260 ### Removing vertical-align from the .fa-icon Sass mixin
262 Font Awesome has supported Sass and Less CSS pre-processors for a long time.
264 The version 5 `.fa-icon` mixin which is present in `scss/_mixins.scss`
265 previously included `vertical-align` which was incorrectly shifting icons.
267 If you have used this mixin in your own Sass files you will need to check the
268 alignment of those icons after upgrading to 5.8.0.
274 There are no breaking changes in this version upgrade.
280 The cheeseburger icon incorrectly placed the cheese _under_ the patty. This is unacceptable and we've fixed it.
286 ### OTF and TTF files
288 The PostScript name has been changed from `FontAwesome5ProSolid` to `FontAwesome5Pro-Solid`. This was done to be more compatible with tooling such as XCode.
290 We've also update the `Version` specifier. Font files only support a MAJOR and MINOR version number so we have modifed our schema. For example, version 5.7.0 of Font Awesome is reflected as 329.472 in the individual font files.
294 The calendar-alt icon has been reverted back to the previous design in versions <= 5.6.0.
300 The fire icon has been reverted back to the previous design in versions <= 5.5.0.
302 We have moved the redesigned icon to fire-alt.
308 There are no breaking changes in this version upgrade.
314 In this release we've taken time to re-organize the directory structure to
315 prevent redundancy and improve findability.
317 ### Directory structure changes
319 | Old path | New path |
320 |-----------------------------------|-------------|
321 | advanced-options/metadata | metadata |
322 | advanced-options/raw-svg | svgs |
323 | advanced-options/svg-sprites | sprites |
324 | advanced-options/use-with-node-js | js-packages |
325 | svg-with-js/js | js |
326 | svg-with-js/css | css |
327 | use-on-desktop | otfs |
328 | web-fonts-with-css/css | css |
329 | web-fonts-with-css/less | less |
330 | web-fonts-with-css/scss | scss |
331 | web-fonts-with-css/webfonts | webfonts |
337 There are no breaking changes in this version upgrade.
343 Categories were renamed from:
345 * Holiday to Halloween
348 The "wand" icon in version 5.4.0 matched the "wand-magic" icon. The magical
349 sparkles have been removed for "wand". If you were relying on this decoration
350 in your design switch to "wand-magic" to bring the magic back.
356 There are no breaking changes in this version upgrade.
362 The following Pro-only icons were removed from Font Awesome Free as of 5.3.1:
388 These icons were unintentionally included in 5.3.0.
394 Sass mixin syntax has been updated to address a bug.
396 Use `@extend %fa-icon` to correctly maintain CSS order in output files.
402 @include fa-icon; /* incorrect */
406 content: fa-content($fa-var-twitter);
415 @extend %fa-icon; /* correct */
419 content: fa-content($fa-var-twitter);
428 There are no breaking changes in this version upgrade.
434 Less and Sass files incorrectly contained the "fa-" prefix for style files.
435 These files have been renamed to be consistent with other files in the
438 If you are using the Less or Sass file styles individually you will need to
439 correct the names in your builds.
441 | Old filename | New filename |
442 | --------------------------- | ------------------------ |
443 | less/fa-solid.less | less/solid.less |
444 | less/fa-regular.less | less/regular.less |
445 | less/fa-light.less | less/light.less |
446 | less/fa-brands.less | less/brands.less |
447 | scss/fa-solid.scss | scss/solid.scss |
448 | scss/fa-regular.scss | scss/regular.scss |
449 | scss/fa-light.scss | scss/light.scss |
450 | scss/fa-brands.scss | scss/brands.scss |
456 ### New packages available for browser-only integration
458 **If you were previously using @fortawesome/fontawesome you need to switch to one of the new packages.**
460 Our Free and Pro CDN provide access to JS, CSS, sprites, and separate SVG files.
462 We've now made these files conveniently available through NPM.
464 * [@fortawesome/fontawesome-free](https://www.npmjs.com/package/@fortawesome/fontawesome-free)
465 * @fortawesome/fontawesome-pro (private package, requires Pro subscription)
467 If you are familiar with the paths and options available with the CDN these
468 packages should be familiar.
470 Information about [Font Awesome Pro subscriptions](https://fontawesome.com/pro)
471 can be found in your [Font Awesome awesome
472 account](https://fontawesome.com/account/services).
476 The following packages have been renamed as part of 5.1.0 of Font Awesome.
478 _All packages are in the [@fortawesome NPM scope](https://www.npmjs.com/search?q=scope:fortawesome&ranking=optimal)_
480 | Old package(1) | New package |
481 |---------------------------|------------------------|
482 | fontawesome-free-webfonts | fontawesome-free |
483 | fontawesome-pro-webfonts | fontawesome-pro |
484 | fontawesome-free-solid | free-solid-svg-icons |
485 | fontawesome-free-regular | free-regular-svg-icons |
486 | fontawesome-free-brands | free-brands-svg-icons |
487 | fontawesome-pro-solid | pro-solid-svg-icons |
488 | fontawesome-pro-regular | pro-regular-svg-icons |
489 | fontawesome-pro-light | pro-light-svg-icons |
491 (1) Old packages have now been deprecated. They are still available but will only receive high priority patch release fixes.
493 **You'll need to update your package.json file with the renamed packages and new versions.**
495 ### No more default imports
497 Recently we spent a good deal of time supporting TypeScript to enable us to
498 create the Angular Font Awesome component. During that adventure we
499 [were](https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html)
500 [convinced](https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad)
501 that we were going to remove default exports from all of our components,
502 libraries, and packages. This is complete with the umbrella release of `5.1.0` of Font Awesome.
509 import fontawesome from '@fortawesome/fontawesome'
510 import solid from '@fortawesome/fontawesome-free-solid'
511 import faTwitter from '@fortawesome/fontawesome-free-brands/faTwitter'
512 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
514 library.add(solid, faTwitter)
520 import { library, dom } from '@fortawesome/fontawesome-svg-core'
521 import { fas } from '@fortawesome/free-solid-svg-icons'
522 import { faTwitter } from '@fortawesome/free-brands-svg-icons'
523 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
525 library.add(fas, faTwitter)
527 // Kicks off the process of finding <i> tags and replacing with <svg>
531 This is also a valid way to import icons that works if your tool does not support tree shaking:
534 import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
537 ### Improved support for tree shaking
539 Tree shaking is now functional by default and no additional configuration is required to make it work.
541 The `shakable.es.js` module has been removed and is no longer needed.
543 If you've previously configured tree shaking by modifying your webpack or rollup you can safely remove these.
545 **We recommend that you check your bundle size after upgrading an ensure that file sizes are as you would expect.**
552 '@fortawesome/fontawesome-free-solid$': '@fortawesome/fontawesome-free-solid/shakable.es.js'
559 const alias = require('rollup-plugin-alias')
565 '@fortawesome/fontawesome-free-solid': 'node_modules/@fortawesome/fontawesome-free-solid/shakable.es.js'
575 Due to a collision with the "r" glyph the R Project brand icon has been renamed to `r-project`.
581 ### SVG Attribute was changed from data-fa-processed to data-fa-i2svg
583 As part of a bug fix for the release of 5.0.6 we renamed an attribute that was found on `<svg>` elements from
584 `data-fa-processed` to `data-fa-i2svg`. We feel this more accurately reflects the intent and purpose.
586 This attribute is added to any icon that has been generated using `fontawesome.dom.i2svg()`.
588 Be aware that `data-fa-i2svg` (or `data-fa-processed`) will no longer be present on icons that are created using
589 `fontawesome.icon()`.
591 If you've written and DOM queries that rely on `data-fa-processed` you should get things working again by doing a
592 simple find and replace.