is a former colleague in Taobao Net press F12 after get the surprise:
Taobao alphabet
Have you ever seen this picture of a loss? Sao years, matter, catching up!
Read this table, I want to say Iconfont this east, simply rely on the first feeling, I think of is iconfont = = Icon + font?
The actual result is as we think, the combination of icon and font is Iconfont
How to use Iconfont font icons-super easy!
I previously because the project with bootstrap more, so the use of font awesome fonts More, then touch the Iconfont, find what icons you want to have, you can also customize the icon, very powerful! Before watching a wave of tutorials, feel tedious, Self-understanding after feeling so simple, did a simple tutorial, directly on the map, simple rough, to avoid the
icon Optional URL: http://www.iconfont.cn/1. From Ali Mom website to buy small icons, add shopping cart, download good documents;2. Put the font file into the font folder (TFF) (Woff), (EOT)3. The following content is introduced in the Stylesheet (.. /font This is based on the relative path to make the corresponding choice) @font-face {font-family: ' Iconfont ';Src:url ('.. /font/iconfont.eot '); /* ie9*/Src:url ('.. /font/iconfont.eot #iefix ') forma
Vector Icon Replacement TutorialFirst entry: http://www.iconfont.cn/Search your Classified keywords---then add to cartAfter adding the cart, download to local browser to open demo.htmlReplace a class= "original style" with IconfontTo download to the local demo inside the four files into the corresponding template folder.Then open the corresponding folder under Style.css to find/* Font icon area */@font-face {Font-family:fp-font;Src:url (HTTP://AT.ALICDN.COM/T/FONT_1394079079_0082858.EOT);Src:url
Iconfont more and more get the front end of the concern, especially Ali that Iconfont library of the introduction and continuous improvement, coupled with even IE6 can be compatible, is indeed a good thing.
Now that the fire, our company mobile Project also plans to join this iconfont, so I have to our own project to do a test, mainly in favor of the mobile side
How to Use iconfont in Android, androidiconfont1. iconfont
Iconfont is both an icon and a font. Specifically, it should be an icon displayed in the font form. Unlike the icon in the traditional image format, this icon is displayed in a font, so it is very convenient to change the size, color, and background color.2. Use method 2.1 to download resources
Resource
iOS can use a single icon (svg,png) directly. You can also introduce font applications directly:1: Add the Font file (. ttf) you downloaded from the Iconfont platform to the project;Open the Info.plist file, add a new array type key, set the key name to Uiappfonts (Fonts provided by application), increase the font filename: "Iconfont.ttf"2. Objective-c Use Iconfont font:UILabel * label =*
Icon Font IconfontThis is a font that has a lot in common with SVG.It is vector, zooming in and out of distortion.Very and very small. We make it look like a word.Fonts are supported from IE4 onwards. Very good compatibilityThe only trouble is to make trouble.More and more websites are starting to use this icon font. In some places, we do not use the sprite image, directly with the icon font.use of the icon fontThe production of their own trouble, we are generally online direct download, therefo
and right side axis is set to 0, so that can be displayed on the page.The status after completion is as followsThe Unicode code for this font is $f112, and the name isAfter you have finished exporting fonts, you can export fonts in Woff and OTF formats in Fontcreator, and if you need to support other browsers, select convert font format online.Step Threereferencing fonts in CSS@Font-face{Font-family: ' Emotion ';Src: Url' Emotion.eot ');/* ie9*/Src: Url' Emotion.eot? #iefix ')Format' Embedded-o
Iconfont has many conveniences for client applications:
1. Free change size
2, free to modify the color
3, can add some visual effects such as: Shadow, rotation, transparency.
4, compared to the picture of the unit to save resources
Normal Add scheme
The first step: Copy the font file to the project assets directory;
The second step: Open the demo.html in the Iconfont directory, find the correspo
format only, IE9 starts to support Woff.2.2 Specific UseFirst you need to use font software (such as Fontcreator, FontLab) to do this font, in a variety of online tools to convert to GE Hong font format:*https://www.kirsle.net/wizards/ttf2eot.cgi Online convert TTF to EOT format;*http://www.fontsquirrel.com/tools/webfont-generator powerful online TTF for EOT, Woff and other font formats* In addition, the EOT file must be added to the domain name whitelist before it can be used, it is recommende
Before making a cake project, the design gave me a picture (tips:["\e60d" as a small icon for the cake)
Among the cake icons, my first reaction was to do it with before. Then put the hex code of the Iconfont icon into the content.
It is so-called, the ideal is plump, but the reality is very bony. Have failed.
So, I just turned up the previous article is related to the content character encoding, poke me to view. So I changed the value of a cont
Turn from http://www.augsky.com/775.html casually talk about the pros and cons of bothIn fact, the main point is to say iconfont advantages and font awesome shortcomings. -_-|||Iconfont's icon library is quite huge, I wrote an article in the time of 51,794, and now after the refresh of the number of icons is 52,090. If you still don't have the icons you need in such a large library, you can create your own icon and use the Web site's online build tool
1. Select the icon to add to the cart from http://www.iconfont.cn/.2. Select the download code in the shopping cart.3. Open the compressed package and put the four files in the package into the Asstes folder in the project.4. Import the picture in the code by setting TextView typeface.1 TextView TestView = Findviewbyid (r.id.text); 2 Typeface Typeface = Typeface.createfromasset (Getassets (), "Iconfont.ttf"); 3 Testview.settypeface (typeface); 4 Testview.settext (html.fromhtml (" #xf0343;")); Te
First, "Iconfont"
Iconfont supports all low-version browsers;
Iconfont's icon library is larger;
Iconfont can use their own uploaded SVG, but it takes a lot of time and patience to design AI icons;
The use of Iconfont is more flexible, can be freely paired with the combination, on request. If the site onl
for background-position: pinpoint the blind eye. 3. Facilitate maintenance, add, modify, delete icons conveniently, the individual icons are relatively independent. 4. Small size, fast request speed, can bring a better user experience. 5. Vector diagram, zoom in, stretch will not distort. Some people may feel that the font icon is too monotonous, in the animation, transition, shadow seems to be difficult; however, in my opinion, these effects do not have a significant impact on the user experie
1, about IconfontIconfont is both icon and font, in particular, it should be displayed in the form of a font icon. Unlike icons in traditional picture formats, this kind of icon is easy to change in size, color, and background color because it is displayed in font form.2. How to use 2.1 Download resourcesResource Source: http://www.androidicons.com/ Follow the guide to find the download link. Download the decompression to find Iconfont/font, the insid
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.