Hello friends!
Have you ever encountered a situation in which a different icon in your design is not in the library font icon that you are using ? Maybe not a few times, right? So what do you need to do in this case? Perhaps most of you will choose the method which is to export the icon to an svg file and use it as an image or background-image. However, the problem is that when the icon has many different colors, you will have to export the entire icon corresponding to each color. That would be quite troublesome, right? So why don’t we use a more convenient way? That is to convert the svg file to the font icon.
As the question on the title of the article, today I will guide you how to convert 1 svg file in a quite simple and extremely convenient way for you. First, you can access this web: https://icomoon.io/app/#/select
I introduce a little bit about this web offline. This website is also one of the font icon libraries like Awesome. You can download its font icon and use it normally. Even on this web we also allow to import font icons from other libraries.
In addition to the above functions, it has one more function that supports converting svg to icon font.
- B1: Click the Import Icons button . This is the part to upload svg files.
After uploading the svg file, the web will display a list of your icons (the part I have circled in red) .
- B2: Config list font icon. You can arrange and customize your icon-font list by clicking on the small icon on the right side of the screen.
- B3: Select the icons that you want to convert to font icon. Click on those icons. After selecting, the selected icons will have a yellow border as shown below.
After the selection is complete, the fixed taskbar below will display the number of icons you have selected: Selection (6)
- B4: Click on the tab ** Generate Font **
This time will jump to page list icon-font. You can freely change the name and download the icon-font to use. It will be an icon-font package like any other library.
About how to declare icon-font, you probably already know it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?6z598n'); src: url('fonts/icomoon.eot?6z598n#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?6z598n') format('truetype'), url('fonts/icomoon.woff?6z598n') format('woff'), url('fonts/icomoon.svg?6z598n#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
You can refer to more about using icon-font in this article.
Thus, through the article you know one more useful method when using svg files already. Good luck!