To speed up pages and reduce render-blocking CSS—which improves the perception of how sites load—we are upgrading the Font Awesome library of icons to SVG version 5.
Scalable Vector Graphics (SVG) files are an XML-based text format that describes to the browser how the icon should appear, and then the browser renders it at any size asynchronously. This means pages are not blocked from rendering until the font library is downloaded but can be rendered as soon as the HTML file is delivered from the server.
The new Font Awesome 5 library is a big improvement for several reasons:
The SVG format is faster to load and always looks sharp.
Each icon was redesigned from scratch for maximum consistency and readability.
Icons are friendly on all viewports including Retina displays, mobile screens and desktop environments.
The JS and CSS has been updated and modernized.
Some icons in the Font Awesome SVG 5 library have been changed to be easier to read. So there may be slight differences in the icon itself. We also took this opportunity to create a custom library of icons to make the total library package much smaller and easier to load.
It is possible your site may have custom designs or blocks that reference old icons. In this case, the icons are coded to disappear rather than be a broken image. If you need to update your custom designs, the new HTML markup to show Font Awesome icons will be split into three libraries.
These libraries do not contain all icons from Font Awesome, only ones that are used by standard media websites.
Each library needs to be referenced slightly differently in the HTML markup.
Font Awesome Solid (FAS) Library
For the Font Awesome Solid library, the HTML markup would be:
