CODEWITHSUNDEEP
htmlcssfont-facewebfonts
3gwebtrain
3gwebtrain

Reputation: 15293

Find out the unicode character code of icon-font icons

I have a font file called icon-font.woff, and I have the corresponding SVG file. It has some number of icons inside. now i would like to use these icons in my html file using css like this:

.icon-add-contact:before{content:""}

But I don't know what is the value I need to give in the content above. And I don't know which value goes to which icon.

How to handle this?

Upvotes: 5

Views: 6489

Answers (2)

cygro
cygro

Reputation: 84

There's an easy way: Get the URL of the icon font (usually a .woff), replace it with the "ttf" extension. Download that using your browser and install the font. Open the character map, choose the font and browse the characters. you either copy the character or use the unicode character it shows you. On Windows you can as well open MS Word or Outlook, choose "Insert -> Symbol" to get the character map.

Upvotes: 0

KWeiss
KWeiss

Reputation: 3144

According to this article, you should be able to find the unicode codes inside the SVG files of your font. In there, you should see something like this:

<glyph unicode="!" horiz-adv-x="100" d="M83.522656250000011
              38.628515624999999 C85.970996093749989 38.628515625000006
              90.867675781250000 38.628515625000006 93.316015624999977
              38.628515625000006 C94.026953124999977 38.628515625000006
              94.737695312500023 z" />

The unicode attribute will tell you what the code is, in this case it's !, but generally it will be something like \f179. This unicode code is what you will need to put after content:.

The article by Anselm Hannemann (same link as above) describes a method to create an HTML table that will display each icon next to its code.

Upvotes: 7

Related Questions