How to make a font using a png image?

What are the ways to display only a specific icon from my predefined png image while using font awesome for other fonts?

• So my precise problem stems up from the fact that I am unable to make a vector icon for one of my icons. I have that icon as a image file but if I try to convert it using raster vector image it looks horrible. As I can't make it a vector svg file I can't include that as part of the awesome font. Now my real problem. The icon gets displayed using a directive       <i class="icon-{variable name}"></i> This variable portion is changed upon the response from my API. For all other icons it will work. However for obvious reasons for the icon I want it won't find it in awesome font. hence when it encounters "icon-custom" I want the css in the awesome font which generally shows something like     .icon-wap:before {         content: "\f102";     }  to point and load a specific .png file (my icon). Is this even possible with the css? I knew there was a way to using variables.less in bootstrap sprites to load custom glyph. but it seems that's not a possibility now. So is there a way i can do this?

• Answer:

  You can solve this problem without actually modifying fontawesome very much. provided you're ok supporting ie9+ if you're still using fontawesome 3.2, you can add something like this to whatever less/css file imports fontawesome.less: .icon-namespace-blah:before{ content: " "; display: inline-block; width: 16/14em; height: 1em; text-align: right; padding-right: 4/14em; background-image: url(foo.png); background-size: contain; background-repeat: no-repeat; } this results in you getting something like the builtin .icon-fixed-width styling but with your image foo.png being used. the important part is setting both a width and a height so that the background-image works. you will almost certainly want to prefix your custom icon class name with a string of your choosing because it's very likely your classname will collide with fontawesome otherwise. you might get a bit more control if you created a blank glyph with the proportions of your static image, but this will almost certainly 'do the right thing' for most cases.