If you want to edit your icon fonts - to add/remove icons or just to see the codes for the existing icons you need to follow the following steps:
- Go to this site - icomoon.io and click the purple IcoMoon App button in the top-right
- In your file explorer go to the location of the icon-font files, for example:
~ Presentation\Nop.Web\Themes\Emporium\Content\icons
- Drag and drop the .svg file (e.g. emporium-icons.svg) on the IcoMoon screen. Click YES on the pop-up that shows up!
NOTE: Skip step 4 if you don't want to add new icons to your font. - Make sure you have the icon you want to add to your font in a .svg format.
Drag and drop it over the icon-font you have already loaded in the browser window and it will show up first.
You need to drag it at the end of all icons (so it doesn't mess up the existing icons codes) and then select (highlight) it.
- After you have selected (highlighted) all of the icons and click Generate Font button in the bottom right.
NOTE: Skip step 6 if you didn't add any new icons to your icon-font - Download your new font and extract it. In the newly extracted files, find the fonts folder and rename the files in it with the name of your existing theme icon-font (e.g. emporium-icons.svg/.woff/.ttf/.eot). Make a backup copy of your existing icon-font files somewhere and then replace them with the ones you just renamed.
- To use your icons you need the CSS content code for the pseudo-elements (:before and :after). To use this code you need to be familiar with the CSS rules for icon-fonts.
