What is an icon font? How to make and use it in Axure RP and Coding?
Introduction
Now when it comes to Icon Font, it is not a new vocabulary. There are many articles about it on the Internet, and many websites have used it. This article mainly organizes the entire process of making Icon Font, and adds The problems encountered in the production, so that everyone can quickly get started and avoid these problems when using it in the future.
At the same time, icon font can also be used in Axure RP. I will also briefly introduce how to use Icon font in Axure.
1. First of all, what is icon font？
In my opinion, what we usually refer to now as Icon Font is a method of replacing image files with font files to display elements such as icons and special fonts.
2. What can it do？
This is where icon font is used by apple.com
This is where icon font is used by amazon.com
3. Next, we naturally have to look at the advantages and disadvantages of Icon Font, so as to decide whether to use it
First of all, it is much smaller than the image
This is a set of Icon Font font. Just imagine how big it would be if this was a picture, 50K? 100K? even more? But the file size is only 13K.
Not only is it small in size, but also has better maintainability (because it is a vector, it is not stretched and deformed; the color can be changed, and some CSS3 effects on text are supported).
Images like these can be made with Icon Font.
And it can also be placed in CSS through base64, so as not to generate Http requests for images.
Of course, Icon Font also has its shortcomings. Because it is a font, it only supports solid colors on the image, and does not support multiple colors.
The emoji are in multiple colors, so I can't use the Icon Font.
Although the production of Icon Font will naturally increase the cost of reconstruction, but it is still worthwhile compared with maintenance later.
Before making it, we need to know what tools are needed. In fact, it is very simple. We only need FontCreator and PS.
This is the meaning of the various values of the font
In the making process, we first need our designer to give the vector image of the Icon. We need to rasterize the Icon layer in PS, then save it as png24, and then import it into the font in FontCreator. Adjustment (the use of each value of font making will be given below. I think the most important thing is the width from left and right and the distance from the baseline. It is best to have the same layout of an icon, which is also easy to align), and finally through the online tool to convert the font file to the various formats we need.
Because the fonts supported by different browsers are different, we need to convert the fonts we made into a variety of formats.
A better font conversion online address:
http://www.fontsquirrel.com/fontface/generator. If there is no special need when we convert, we can directly convert through basic.
5. After the production is completed, we will of course use it
Use icon text in Axure RP
1.In Axure RP, click the menu on the Top Toolbar as shown above.
2. On the Publish Project panel, click the Fonts tab. Then use the icon font through Link.css or @font-face.
Use icon text in Coding
1. The first is the font declaration. Since the font files supported by each browser are different, we need to create a variety of font files for this feature of the browser to achieve compatibility.
At present, there are two ways to display the icon in the web page. One is to directly input the font represented by the icon in HTML. The advantage is that it is compatible with all browsers. That is, when changing the icon, you need the assistance of downstream back-end programmers.
Another way is to add it through the after pseudo-class in CSS, so that the category of Icon can be directly controlled through CSS, but not all browsers are compatible, but we must take into account the users of old browser.
By analyzing the current development process and project, it is more appropriate to use the first method to input directly in html.
Of course, when we enter, how do we know that the character to be entered is the Icon I want to enter? You only need to check the Unicode comparison table and compare according to the Unicode code in the font making software.
We make icon font for our own future use, because an HTML component page that is easy to manage and use is essential, which should include the description of icon, the corresponding code and other information, so that it can be used conveniently by ourselves or colleagues.
Personal experience
In the process of making Icon Font, I also encountered some problems.
1. The cross-domain problem is a commonplace. It can be solved by configuring your own server or placing it in the same domain. You can also use base64 to put it into CSS.
2. When making font files, you must remember not to delete the contents just because the file is too small.
The first few in this software must not be deleted, otherwise most browsers will not be able to read the font file.
3. If the png24 exported from PS is deformed when importing the font file, you can try to enlarge the vector image in PS and save it as png24 for import.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Leave a comment