Glyphicon, font-family, @font-face, unicode, etc.

I often see cool icons on webpages such as the stars for rating.

At first, I think those are images, i.e., <img> elements. But actually they are not. They are special text as ordinary alphabet text. If you cannot type those icons as ordinary text in your html editor, you can use an html entity to represent them such as &#e006; in which e006 is the unicode of the star icon.

However, if you write &#e006; in an html file, you will see it displayed as  or other mess char in your browser, not a star, why? Because the star is only defined in the Glyphicons Halflings font-family. In the default font files on your system, the unicode e006 may represent other mess chars. So you should define/import the Glyphicons Halflings font-family using a @font-face css rule like:

@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

The css at rule defines a new font-family: “Glyphicons Halflings”. The font file can be downloaded from the url specified as the src css property. You can specify multiple urls in the src property. A browser will use the first available one.

Now, to write a star in an html, you can use the following code:

<p style="font-family:'Glyphicons Halflings';">&#xe006;</p>

Note that the html entity is displayed on web page as a character. If you copy the character to elsewhere, what is copied is just the character, not the html entity. You cannot even see the html entity in the development tools(F12). The only location to find the html entity is the source file of the html page. If you copy the character to somewhere such as notepad++ and save the file as utf-8 encoded. Then by viewing the file in hex mode, you can find the uft-8 encoding of the character, not the html entity.

Using html entity is not the only way to write a star on your webpage. You can directly input the uft-8 encoding value(ee8086) of the unicode(e006) if your editor supports hex editing(if you use notepad++, you should install the Hex-Editor plugin to edit the html source code in hex mode). You can convert unicode to uft-8 using this online tool. For example, the Genie emoji 🧞 has the unicode of 1f9de(Dec 129502)(html entity: 🧞) and the converted utf-8 is F0 9F A7 9E, which is what you see in the hex mode of notepad++ if the file is utf-8 encoded. Now, although the star is displayed as a box in the notepad++ editor because notepad++ does not use the Glyphicons Halflings font, it can be displayed as a star in your browser.

But you may still see a mess char for the utf-8 encoded star on your browser. You should click the View/Text Encoding/Unicode menu item to force your browser(firefox) to interpret the html file as a utf-8 encoded file. By default, Firefox interpret the html source as ascii encoded so it won’t get the correct unicode value for the star from the source file. Or, you can add a meta tag in the head tag of your html file:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

The browser interprets the html file as ascii encoded until it sees the meta tag, then it will re-interpret the html as utf-8 encoded, and it will get the correct unicode value of the star.

The rendering process for text is as follows. The browser gets the unicode of a char by converting the utf-8(if the html file is saved with utf-8 encoding) to its unicode value, or by converting the html entity to a unicode. The browser uses the unicode (as an index) to find the data structure(the points, contours, etc.) representing the shape of the text/icon in the font file(.eot, .tff, .woff, .woff2, etc.). The browser draws the text/icon on the window with its shape data.

If you know about pseudo-elements, you can also use the pseudo-elements to add a star in some element:

<html lang="en">
<head>
<style>
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
p::before {
  content: "\e006";
  font-family:"Glyphicons Halflings";
}
</style>
</head>
<body>

<p>myprogrammingnotes.com</p>
</body>
</html>

This is more convenient because you do not need to convert the unicode to utf-8. In the content property of the p::before rule, you simply write the unicode(“\e006”) of the star icon. The best part of this method is: you do not need to save the html source as a utf-8 encoded file, you do not need to write a meta tag to specify the utf-8 encoding. Let the browser interpret the file as ascii and the star can be shown without problem.

Bootstrap includes the @font-face/pseudo-elements in its css. You can link to this css hosted on a CDN and do not need to write the css at rule/pseudo-elements yourself.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<p><span class="glyphicon glyphicon-star"></span></p>

</body>
</html>

Did you like this?
Tip admin with Cryptocurrency