To give you illustrator software users to detailed analysis to share the font icon Simple production tutorial.
Basic idea: first, make icon → two, generate icon font → three, use CSS to introduce the font to the website.
1, Adobe Illustrator, version is not limited, need to be able to save files as SVG format (other can make SVG format software should also be able to, I have not tried);
2, compression tools, support ZIP format (basically a compression tool are supported).
Also make sure the computer can surf the Internet.
1, in the AI new document, the width is 512 pixels wide, the following figure (do not ask me why is 512px, I do not know, I tried a few times after the calculation, only this size and the page size is right on);
2, in the document to draw the icon, with a pen or graphics tools at will, but note that the color is black, the background is empty, also can not have a gradient, translucent what. The following figure (in principle, the strokes of the graphic to be as few as possible, while trying to complete the entire icon in a path, four sides according to the design situation to choose whether to leave blank, to ensure that all icons in the visual size of the balance, as well as the unity of style);
3, after the painting, save, save to choose the SVG format, this is the focus, the following figure. SVG option default is good (my default is 1.1 version), another name and icon to match, in English, lazy words with pinyin, at least to ensure that they know which is which. Multiple words with "-" instead of space (SVG file can be opened in the browser to view OH);
The effect of SVG files viewed in Google browser
4, repeat the above steps, the required icons are drawn out to save the SVG file, and placed in the same folder, to the folder life good name, the following figure.
There are only three examples to be made here. Actually do suggest two or two more. Only one word is not generated for CSS and HTML files.
5, compressed This folder into a zip file.
6, visit Address: Http://iconvau.lt/app (slightly slow, but also please wait patiently.) This site is very powerful, directly after the two big steps are arranged, you will see the following interface, the zip file into the red box (you can also click the Red Box range, select a zip file), patiently waiting for file upload and conversion, do not close the browser. Font conversion is completed will automatically download a file named Iconvault.zip, there is no automatic download can point to the link in the site to download (compressed package in the annex for your reference).
7, decompression iconvault.zip files, can look at the following files (you can open the suffix name to view file types):. Fontcustom-data can delete, EOT, SVG, TTF, woff These four are font files, compatible with different platforms respectively. A CSS file, as well as an HTML file. Open the HTML file in the browser and you can see all the icons you've designed, lined up in different sizes.
What you can see with your browser opening an HTML file
For obsessive-compulsive disorder, such a long file name will make people crazy, then open the CSS file, at the top to find a few font file name, get rid of, and then change the name of the corresponding font file.
The introduction of the Web site, HTML file is a good example, know the point of HTML and CSS to see the look. After the introduction of CSS style, as long as in the Web page to write this line, and the same as text, assigned to the corresponding style, there will be a corresponding effect.
The creation of the font icon here, even if finished, the generated font icon on the computer to browse a small number of flaws, this is because the creation of the icon does not take into account the small resolution of the case, like too small text display will not be ideal, which requires a fine fit. But browsing on the high PPI phone screen is no problem. Of course, more colorful icons are still only dependent on pictures.
Okay, the above information is small make up to you illustrator of this software users brought the detailed font icon simple production tutorials to share all the content, you see the users here Small series believe that we see here is very clear the production of a tutorial it, Then everyone will go to follow the small part of the above to share the tutorial on their own to make a try it.
