Add custom icons to font awesome

Add custom icons to font awesome

I love the Font Awesome icon font and want to use it for most of the icons on my site but there are a few custom svg icons that I'd need in addition to what's offered.

I noticed that the .svg version of Font Awesome is composed mostly of these elements:

...        ...  

Would it be effective to take my svg icon code, paste it in as a new glyph element and assign an unused unicode char?

Answer by Erik Dahlstrm for Add custom icons to font awesome

Depends on what you have. If your svg icon is just a path, then it's easy enough to add that glyph by just copying the 'd' attribute to a new element. However, the path needs to be scaled to the font's coordinate system (the EM-square, which typically is [0,0,2048,2048] - the standard for Truetype fonts) and aligned with the baseline you want.

Not all browsers support svg fonts however, so you're going to have to convert it to other formats too if you want it to work everywhere.

Fontforge can import svg files (select a glyph slot, File > Import and then select your svg image), and you can then convert to all the relevant font formats (svg, truetype, woff etc).

Answer by Glen for Add custom icons to font awesome

You could give http://fontcustom.com/ a go, it creates your own font from svg files.

Answer by davidtheclark for Add custom icons to font awesome

Give Icomoon a try. You can upload your own SVGs, add them to the library, then create a custom font combining FontAwesome with your own icons.

Answer by Samuel Bergstrm for Add custom icons to font awesome

I researched a bit into SVG webfonts and font creation, in my eyes if you want to "add" fonts to font-awesome already existing font you need to do the following:

go to inkscape and create a glyph, save it as SVG so you could read the code, make sure to assign it a unicode character which is not currently used so it will not conflict with any of the existing glyphs in the font. this could be hard so i think a better simpler approad would be replacing an existing glyph with your own (just choose one you dont use, copy the first part:

Save the svg then convert it to web-font using any online converter so your webfont would work in all browsers.

once this is done, you should have either an SVG with one of the glyphs replaced in which case youre done. if not you need to create the CSS for your new glyph, in this case try and reuse FAs existing CSS, and only add

>##CSS##  >.FA.NEW-GLYPH:after {  >content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'  >(other conditions should be copied from other fonts)  >}  

Answer by OzBob for Add custom icons to font awesome

Similar approach to @Samuel-bergstrm:

• Download Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
• Download FontForge http://fontforge.github.io/en-US/downloads/
• Download Inkscape
• Open Inskscape and create a single layer shape as your new font icon
• Save SVG file, Close Inkscape
• Open FontForge (If you have multiple monitors, use Windows-LeftArrow, to reposition as they have strange SWING java windows that go off monitor, and have modal problems with popups - I had to check my task bar for some)
• File | Open fontawesome-webfont.svg
• File | Import
• Scroll to the bottom, Right Click on Icon | Glyph Info
• Update Glyph Name to uniFXXX (XXX is something like 501, a higher number than the highest Unicode used in v4.5 of FontAwesome)
• Unicode Vlaue U+fXXX
• Click OK
• File | Save
• File | Generate Fonts ...
• Close FontForge
• Open your web project
• Copy your font files to the (in my project) "\Content\fonts\" folder.
• Edit "\Content\styles\fa\path.less" to be like:

@font-face {        font-family: 'FontAwesome';        //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');        src:       	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),          //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),          url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),          url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),          url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');      //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts        font-weight: normal;        font-style: normal;      }

I know it may be 'controversial' to comment out other file types, but happy to hear how to generate .eot or .otf files in the comments.

• and finally, as Samuel mentions, update your CSS/LESS with:

  .fa-XXX:before { content: "\f501"; }

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72