9 May, 2019

A Foray into Font-icons

Recently we’ve been exploring ways to reduce the mark up required on webpages to help improve the text to code ratio on our websites and by extension, our overall SEO. One solution we’ve discovered so far, is to use font icons.
By compiling all SVG icon based images into a font library and assigning each SVG a character, we can then apply the SVG as a font family in the CSS. This avoids needing an image tag, or using inline SVGs, ultimately improving the balance of text and code used on the page. This process essentially transforms the original file format (in this case an SVG), into a simple “font icon”.


 

Types of Icon Implementations Using SVGs:


Code
<img src="/images/icon.svg" alt="icon" />

Pros
Cleaner mark-up

Cons
Static implementation and therefore, the SVG cannot be used to its full potential, such as changing colours and transforming shapes
Each SVG would be downloaded individually like any other web asset, which could result in render-blocking the page and/or increasing page load time, both consequences that are especially negative for your search engine optimisation
 

Basic images, with some JavaScript to convert to inline SVG code:


Code
https://github.com/madebyshape/svg-convert
<img src="/images/icon.svg" alt="icon" class="svg-convert"  />

Pros
Cleaner mark-up
Able to use CSS to interact with the SVG to change colours or transform shapes

Cons
As above, each SVG would still be downloaded individually like any other web asset which could result in render-blocking the page and/or increasing page load time.
JavaScript would fire after the image has been downloaded causing a flash of original content (FOOC)
Added pressure on the browser, although this is relatively minimal
 

Raw SVG code within the template:


Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410.155 410.155">
  <path d="M403.632 74.18c-9.113 4.04-18.573 7.23-28.28 9.537 10.696-10.164 18.738-22.877 23.275-37.067 1.295-4.05-3.105-7.554-6.763-5.385-13.504 8.01-28.05 14.02-43.235 17.862-.882.223-1.79.336-2.703.336-2.766 0-5.455-1.027-7.57-2.89C322.2 42.332 301.422 34.49 279.85 34.49c-9.336 0-18.76 1.456-28.015 4.326C223.163 47.71 201.04 71.36 194.1 100.54c-2.605 10.945-3.31 21.9-2.098 32.56.14 1.225-.44 2.08-.797 2.48-.627.704-1.516 1.107-2.44 1.107-.102 0-.208-.005-.313-.015-62.762-5.83-119.358-36.068-159.363-85.14-2.04-2.503-5.953-2.196-7.58.593C13.678 65.565 9.538 80.937 9.538 96.58c0 23.97 9.63 46.562 26.36 63.03-7.035-1.667-13.844-4.294-20.17-7.807-3.06-1.7-6.824.485-6.867 3.985-.438 35.612 20.412 67.3 51.646 81.57-.63.014-1.258.02-1.888.02-4.95 0-9.964-.477-14.898-1.42-3.446-.658-6.34 2.61-5.27 5.952 10.137 31.65 37.39 54.98 70 60.278-27.065 18.17-58.584 27.753-91.39 27.753l-10.226-.005c-3.15 0-5.816 2.054-6.62 5.106-.79 3.007.667 6.178 3.354 7.74 36.966 21.514 79.13 32.884 121.955 32.884 37.485 0 72.55-7.44 104.22-22.11 29.032-13.448 54.688-32.673 76.254-57.14 20.09-22.792 35.8-49.103 46.692-78.2 10.382-27.738 15.87-57.334 15.87-85.59v-1.346c0-4.537 2.05-8.806 5.63-11.712 13.586-11.03 25.416-24.014 35.16-38.59 2.574-3.85-1.484-8.674-5.718-6.796z" fill="#76A9EA"/>
</svg>

Pros
No client-side scripting required to render the SVG in its entirety

Cons
Untidy mark-up
Difficult for a developer to understand what the image is
Poor text to HTML code ratio
 

Font icon:


Code
<link rel="stylesheet" href="path/to/fonticons.css">
<i class="fonticon twitter"></i>
or
<i class="fonticon">t</i>

Pros
All icons are held within a single library
Colours can be adjusted by affecting the text colour style (it is a font after all!)
Able to show icons in HTML elements such as dropdowns
Good browser support
Font Icons  have smaller file sizes since they contain fewer characters than a full typeface
Improved text to HTML ratio

Cons
Could be bloaty if using a 3rd party library containing hundreds of icons under the same package. We would recommend building a custom library including only the icons which would get used on a given site.
If the icon contains multiple layers which involve multiple colours, then a font icon cannot help in this situation
Bad for screen readers or text to speech software. However, this could be resolved using aria-hidden in HTML and speak in CSS.
 

Font Icons and Kentico

As well as exploring the pros and cons of using font icons, we’ve also been exploring ways to integrate them within Kentico, our preferred content management system.

We’ve used the CK Editor to add a brand new toolbar drop down into the page editor in the CMS, using Custom Tables as a library source. This library source contains single records, with a single field containing a single character. The font icon font family then converts the single character to the font icon as expected.
 

Leveraging Fonticons To Support SEO

One of the most effective ways to implement an SEO strategy is to mimic the approach of the British Cycling Team during the 2012 London Olympics: instead of trying to improve just one thing by 100%, try improving one hundred things by just 1%.

The end result is the same, it’s 100% better, but the benefit of spreading the effort out across one hundred different facets of your SEO strategy, is that the impact is often greater.

Using font icons to improve the text to HTML code ration on a website, as well as to limit render blocking and improve PageSpeeds is one great example of this methodology.