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>

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

 

 

If you like my content, please consider buying me a coffee. Buy me a coffeeBuy me a coffee Thank you for your support!

Leave a Reply