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

Question

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

Navigation

#1 by (3 votes)

4

I was checking out Font Awesome and Bootstrap . Home They use a font scheme for icons:

In Awesome Font I saw the following files:

FontAwesome.otf

fontawesome-webfont.eot

fontawesome-webfont.svg

fontawesome-webfont.ttf

fontawesome-webfont.woff

I've heard a lot about vectorized images that allow a scalability without loss of quality and that is a very light source.

Well, 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 Awesome Font :

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

What generated:

AndbyanalyzingtheGoogleChrometoolsIcouldseethatonlythefontawesome-webfont.woffwasloaded.

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

What is each such file?

What is the advantage of using ico-fonts (if the term is wrong, I am referring to the method used by Font Awesome and that seems to be the same as Bootstrap >)?

What are the disadvantages?

Because only the fontawesome-webfont.woff file has been uploaded.

At the moment I can not remember which and where, but I downloaded a package that contained only .svg files and each file contained only one icon . One of the ways I found to use them was tagged <img> , but both Awesome Font 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 it that way?

5.2 Having a css file with multiple declarations does not mean having too much unnecessary loading, ie are all the icons listed in the css file loaded for the client even though it will only use one? Or will every icon-fonts file ever be fully loaded anyway?

My biggest concern is performance.

css svg bootstrap-glyphicons

asked by anonymous 08.12.2014 / 22:28

1 answer

Warning: array_filter () expects at most 2 parameters, 3 given Dynamic Search with JSON - PHP - MYSQL

score 3 · Accepted Answer

1. Each such file corresponds to a font type extension.

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

3. I have not yet found any disadvantages, on the contrary, I even created my own fonts using the IcoMoon tool. From the one researched because I could not enter 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, so there are these 4 formats besides WOFF: .eot, .ttf, .otf, .svg.

5. Probably this font package you downloaded is not formatted for use as fonticons. Take a look at IcoMoon that 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 an unnecessary load. But it does not cost to customize for your need. I usually create my fonts so they fit my need well.

I hope to have clarified your doubts. Any other questions write so I answer.

Complementing after thinking more about it 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 no universal format that works in all modern and older browsers: EOT for example only works in IE, TTF has partial IE support, WOFF is the extension that has more browsers support, but not is available in some older browsers and WOFF 2.0 is in progress to suit many browsers.

What is the conclusion of this?

There is not 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 browsers
EOT for the old IE (below the IE9 version) of browsers

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