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