Working with WHHG icons

Recommendations

• Only add new icon when it is needed in the GUI
• Do not use the same icon to represent different features

How to add new icon from the WHHG font

1. Find the icon you need at https://www.webhostinghub.com/glyphs/#preview
2. Inspect the icon to find its code, e.g. .icon-addcomment::before {content: '\f74a';}
3. Copy this CSS style into whhg.css file (projects > hslayers > css > whhg-font > css)
4. Add correspondingg new line inside the subset-font.sh file (projects > hslayers > css), e.g. # icon-addcomment U+f74a and the icon's code into the penultimate line, e.g. ...",U+f05c,U+f74a" --output-file="...
5. Run the subset-font.sh script
6. Navigate to https://www.giftofspeed.com/base64-encoder/ , encode the updated subset.ttf file and copy the base64-encoded content
7. Paste the base64-encoded font inside the src property of @font-face rule inside the whhg.css file. E.g. @font-face { font-family: 'WebHostingHub-Glyphs'; /* Encoded using https://www.giftofspeed.com/base64-encoder/ */ src: url(data:font/opentype;charset=utf-8;base64,AAEAAAAQAQAABAAAR0RFRgASAE..... Don't touch the url(data:font/opentype;charset=utf-8;base64, prefix, neither the ) format('truetype'); suffix
8. DONE