L
L
littleguga2015-10-02 19:19:49
css
littleguga, 2015-10-02 19:19:49

How to add icons to an already embedded font?

There is a font built with fontello and embedded in css via

@font-face {
    font-family: 'icons';
    src: url('data:application/octet-stream;base64,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') format('woff'),
}

I need to add a couple more icons there - how to do it?
Thanks in advance for your informative response!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel Volintsev, 2015-10-02
@littleguga

The easy way
Fontello knows how to add icons. Check out their API, they have a utility on github and a web interface.
https://github.com/fontello/fontello#developers-api
https://github.com/fontello/fontello
Unpack the archive with a web font, add some icons and run the utility - after some time you will get an augmented web font
1. write the icons8.woff.b64 file with the following content:
2. unpack from base64 format
3. Convert the received font file icons8.woff using https://everythingfonts.com/woff-to-svg to a font in SVG format
4. The received file with a font in SVG format icons8.svg using https://github.com convert /icons8/svg-caster to a bunch of SVG icon files
5. add your own icon files in SVG format
6. use fontello.com to create a web font from this set of icon files
BUT
A. The character codes will change in the layout of the icon may be misplaced if the HTML is inserted through codes rather than class names.
B. The icons must be matched in size so that the new two do not look like crows. Useful editor Inkscape or Adobe Illustrator

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question