Add custom icons to font awesome

Question

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  lt glyph   gt  elements        lt glyph unicode   amp  xf0b2   horiz-adv-x  1536  d  M0 80v477q0 51 24 5 61 5t59 5 -24 5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59 5 -25 5t-24 5 60 5v477q0 31 23 57q27 23 57 23h477q51 0 61 5 -24 5t-24 5 -59 5l-160 -158l338 -338l332 334l-162 162q-35 35 -24 5 59 5t61 5 24 5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24 5 -61 5t-59 5 24 5l-162 162l-334 -334l338 -336l158 160q35 35 59 5 24 5t24 5 -61 5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61 5 24 5t24 5 59 5l166 166l-336 336l-340 -340l162 -162q35 -35 24 5 -59 5t-61 5 -24 5h-477 q-31 0 -55 25q-25 20 -25 55z    gt   lt glyph unicode   amp  xf0c0   horiz-adv-x  1880  d  M0 852v152q0 18 1 47 5t10 56 5t29 5 46 5t57 5 19 5q-45 29 -71 5 75 5t-26 5 104 5q0 43 16 5 82t46 68 5t68 5 46t82 16 5q45 0 84 -16 5t67 5 -46t46 -68 5t17 5 -82q0 -57 -27 5 -104t-72 5 -76q37 0 57 5 -19 5t29 5 -46 5t11 -56 5t2 -47 5v-152 q-14 -8 -23 5 -18 5t-27 5 -10 5h-328q-16 0 -26 5 10 5t-22 5 18 5zM158 57v387q0 78 45 138 5t98 109 5q10 10 25 5 21 5t33 5 15 5q18 6 41 7t45 5q61 10 130 19 5t135 19 5q-90 57 -144 5 151 5t-54 5 207 5q0 88 34 166 5t92 136t136 91 5t166 34t166 -34t136 -91 5 t92 -136t34 -166 5q0 -113 -54 -207t-145 -152q66 -10 134 5 -19t130 5 -20q23 -4 45 -5t41 -7q18 -4 33 5 -15 5t27 5 -21 5q66 -59 103 5 -116 5t37 5 -131 5v-387q-12 -6 -20 -13t-18 5 -14t-23 5 -14 5t-36 -15 5h-1368q-35 0 -54 5 22 5t-43 5 34 5zM1452 852v152 q0 18 2 47 5t11 5 56 5t30 46 5t56 5 19 5q-45 29 -72 5 75 5t-27 5 104 5q0 43 16 5 82t46 68 5t68 5 46t84 16 5q43 0 82 -16 5t68 5 -46t46 -68 5t16 5 -82q0 -57 -26 5 -104t-71 5 -76q37 0 56 5 -19 5t28 5 -46 5t11 -56 5t2 -47 5v-152q-12 -8 -22 5 -18 5 t-26 5 -10 5h-328q-18 0 -27 5 10 5t-23 5 18 5z    gt   lt glyph unicode   amp  xf0c1   horiz-adv-x  1597  d  M0 1137q0 88 34 166 5t92 137t136 92 5t168 34q86 0 166 -33t139 -92q8 -8 21 5 -20 5t26 -25t21 5 -25 5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22 5t-86 -31 5q-4 -4 -16 -4t-25 5 10 5t-31 21 5t-42 21 5t-57 5 10 5q-35 0 -66 5 -13 5t-54 -37t-36 -54 t-13 5 -67 5q0 -41 17 5 -75t43 -63 5t56 5 -56 5t57 -53l180 -178q23 -25 54 5 -37t66 5 -12q43 0 73 16t46 16q12 0 39 -21 5t55 5 -49t50 -55t21 5 -42 5q0 -29 -36 -51t-83 -38 5t-94 -26t-72 -9 5q-86 0 -164 5 33t-140 5 92l-303 305q-61 59 -94 139 5t-33 166 5z M578 1010q0 29 35 5 51t82 5 38 5t94 26t72 9 5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139 5t33 -166 5q0 -90 -33 5 -167 5t-92 -136t-137 5 -92 5t-167 -34q-86 0 -165 5 34t-139 5 93q-8 8 -21 5 19 5t-25 5 25t-21 5 26 5t-9 5 26q0 18 13 28q6 8 24 12 q47 10 88 22 5t86 33 5q12 4 17 4q12 0 25 5 -10 5t30 5 -21 5t41 -21 5t58 -10 5q72 0 121 49 5t49 120 5q0 41 -17 76t-44 63 5t-56 5 55 5t-56 5 53l-178 180q-53 49 -123 50q-43 0 -72 5 -17 5t-46 5 -17 5q-12 0 -38 5 21 5t-55 49t-50 56t-21 5 41 5z    gt        Would it be effective to take my svg icon code  paste it in as a new glyph element and assign an unused unicode char

User · Answer

I suggest keeping your icons separate from FontAwesome and create and maintain your own custom library. Personally, I think it is much easier to maintain keeping FontAwesome separate if you are going to be creating your own icon library. You can then have FontAwesome loaded into your site from a CDN and never have to worry about keeping it up-to-date.

When creating your own custom icons, create each icon via Adobe Illustrator or similar software. Once your icons are created, save each individually in SVG format on your computer.

Next, head on over to IcoMoon: http://icomoon.io , which has the best font generating software (in my opinion), and it's free. IcoMoon will allow you to import your individual svg-saved fonts into a font library, then generate your custom icon glyph library in eot, ttf, woff, and svg. One format IcoMoon does not generate is woff2.

After generating your icon pack at IcoMoon, head over to FontSquirrel: http://fontsquirrel.com and use their font generator. Use your ttf file generated at IcoMoon. In the newly generated icon pack created, you'll now have your icon pack in woff2 format.

Make sure the files for eot, ttf, svg, woff, and woff2 are all the same name. You are generating an icon pack from two different websites/software, and they do name their generated output differently.

You'll have CSS generated for your icon pack at both locations. But the CSS generated at IcoMoon will not include the woff2 format in your @font-face {} declaration. Make sure to add that when you're adding your CSS to your project:

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

Keep in mind that you can get the glyph unicode values of each icon in your icon pack using the IcoMoon software. These values can be helpful in assigning your icons via CSS, as in (assuming we're using the font-family declared in the example @font-face {...} above):

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

You can also get the glyph unicode value e953 if you open the font-pack-generated svg file in a text editor. E.g.:

<glyph unicode="&#xe953;" glyph-name="eye" ... />

User · Answer

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   gt   CSS    gt  FA NEW-GLYPH after    gt content  WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND   gt  other conditions should be copied from other fonts   gt

User · Answer

Similar approach to  Samuel-bergstr  m    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     x000D   x000D   font-face   x000D        font-family   FontAwesome   x000D          src  url    fa-font-path  fontawesome-webfont eot v   fa-version     x000D        src   x000D         url    fa-font-path  fontawesome-webfont eot  iefix amp v   fa-version    format  embedded-opentype    x000D            url    fa-font-path  fontawesome-webfont woff2 v   fa-version    format  woff2    x000D          url    fa-font-path  fontawesomeregular woff v   fa-version    format  woff    x000D          url    fa-font-path  fontawesomeregular ttf v   fa-version    format  truetype    x000D          url    fa-font-path  fontawesomeregular svg v   fa-version  fontawesomeregular   format  svg    x000D          src  url    fa-font-path  FontAwesome otf   format  opentype       used when developing fonts x000D        font-weight  normal  x000D        font-style  normal  x000D        x000D   x000D   x000D    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

User · Answer

If you want some icons  or all  from font-awesome including yout custom svg icons you can   1- Go to http   fontawesome io  Download the zip and extract-it for example in your Desktop   2- Go to http   fontastic me  use your email to create an account   3- Once you have been logged-in click on the header option  Add More Icons   4- Select the SVG of font-awesome located in your extracted zip inside fonts   5- Repeat the procces uploading your own svg files   6- Inside Home  at the header of the page  Select the icons you want to download  customize them to give your custom names and select publish to have a link or download the fonts and css   Sorry about my english    D

User · Answer

In Font Awesome 5  you can create custom icons with your own SVG data  Here s a demo GitHub repo that you can play with  And here s a CodePen that shows how something similar might be done in  lt script gt  blocks   In either case  it simply involves using library add   to add an object like this   export const faSomeObjectName          Use a prefix like  fac  that doesn t conflict with a prefix in the standard Font Awesome styles       So avoid fab  fal  fas  far  fa    prefix  string    iconName  string     Any name you like   icon        number     width     number     height     string       ligatures     string     unicode  if relevant      string    svg path data         Note that the element labelled by the comment  svg path data  in the code sample is what will be assigned as the value of the d attribute on a  lt path gt  element that is a child of the  lt svg gt   Like this  leaving out some details for clarity     lt svg gt     lt path d SVG PATH DATA gt  lt  path gt   lt  svg gt     Adapted from my similar answer here  https   stackoverflow com a 50338775 4642871

User · Answer

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

User · Answer

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  lt glyph  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

[svg] Add custom icons to font awesome

Examples related to svg

Examples related to webfonts

Examples related to font-awesome