Vector images, Font Awesome, Bootstrap Glyphicons. How do they work, what are the advantages and disadvantages?

Asked

Viewed 1,776 times

4

I was just taking a peek at Font Awesome and in the Bootstrap.
They use a font scheme for icons:

On Font Awesome I saw the following files:

  1. Fontawesome.otf
  2. fontawesome-Webfont.eot
  3. fontawesome-Webfont.svg
  4. fontawesome-Webfont.ttf
  5. fontawesome-Webfont.Woff

I heard a little talk about vector images that allow a resizing without loss of quality and that being a kind of source is also very light.

Good, all these files add up to approximately 592KB.

To try to understand a little more how this works, I made a very simple example with the Font Awesome:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Awesome</title>
    <link href="/static/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="container body-content">
        <h4><i class="fa fa-flag"></i> One Font, 479 Icons</h4>
        <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
        <h4><i class="fa fa-gamepad"></i> Plays Well with Others</h4>
    </div>
</body>
</html>

That spawned:

exemplo gerado com font awesome

And looking through the tools of Google Chrome I could see that of these files was loaded only the fontawesome-Webfont.Woff.

Arquivos carregados do exemplo com Font Awesome, conforme Google Chrome

So, in this conversation that I had where they tried to explain to me, they said that the ico-fonts are in the file svg, in the case, fontawesome-Webfont.svg.

  1. What is each file of these?
  2. What is the advantage of using ico-fonts (if the term is wrong, I am referring to the method used by Font Awesome and which seems to be the same used by Bootstrap)?
  3. What are the disadvantages?
  4. Because only the file fontawesome-Webfont.Woff was loaded.

  5. At the moment I can’t remember which and where, but I downloaded a package that contained only files . svg and each file contained only one icon. One of the ways I found to use them was with the tag <img>, but both Font Awesome and Bootstrap use something like:

    .fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}

    5.1 What are the advantages of using in this way?

    5.2 Having a css file with multiple statements like this doesn’t mean having too much unnecessary loading, that is, are all the icons listed in the css file uploaded to the client even though it will only use one? Or every icon-fonts file will always be loaded full even?

My main concern is performance.

css svg bootstrap-glyphicons

1 answer

3


1. Each of these files corresponds to a font type extension.

2. The biggest advantage is its easy reapplication anywhere on the site. For example: If you have an icon in the home of 15x15 and the same icon in a 30x30 internal you only need to change its size and do not need to save 2 icons with different size.

3. I haven’t found any disadvantage yet, on the contrary, I’ve even created my own fonts using the Icomoon tool. Give a search because I could not insert the link here.

4. In this case you only uploaded WOFF because Google Chrome prefers this format. Other browsers and operating systems, such as Windows, use other font extensions, for this reason there are these 4 formats besides WOFF: . eot, . ttf, . otf, . svg.

5. Probably this font package you downloaded is not formatted to use as fonticons. From a look at Icomoon you will understand better.

5.1 This is the correct way that these font libraries work.

5.2 I do not agree that it is unnecessary loading. But it does not cost to customize to your need. I usually create my sources so they meet my need well.

I hope I have clarified your doubts. Any other questions write here that I answer you.

Complementing after thinking more about the subject and reading some references...

Currently we have 4 font formats in use on the web: EOT, TTF, WOFF and WOFF2. Despite the wide range of choices there is a universal format that works on all modern and older browsers: EOT for example only works on IE, TTF has partial support from IE, WOFF is the extension that has the most support from browsers, but is not available in some older browsers and WOFF 2.0 is in progress to suit many browsers.

What is the conclusion of this?

There isn’t a single format that works across all browsers, which means we have to deliver multiple formats to deliver a consistent experience.

  • WOFF 2.0 for browsers that support it
  • WOFF for most browsers
  • TTF for the old Android (below version 4.4) of the browsers
  • EOT for the old IE (below version IE9) of the browsers

I forgot to mention the SVG in the conclusion. Technically there is SVG source container but it has never been apoiodized by IE or Firefox and is obsolete in Google Chrome. Use of SVG is limited and will disappear in the future.

  • If you want to edit your reply, Chrome has loaded the font that barks (Woff)

  • @Brunoaugusto I edited and complemented my reply. Thank you.

  • A question: No item 4, be in Windows environment can influence the source? Wouldn’t be only the type of font used by Internet Explorer?

  • @Influence in what sense?

Browser other questions tagged css svg bootstrap-glyphicons

You are not signed in. Login or sign up in order to post.