Alibaba Cloud icon usage

symbol method

This is a brand-new way of use. It should be said that this is the mainstream in the future, and it is also the current recommended usage of the platform. Related introduction can be Baidu. This usage is actually a collection of svg, which has the following characteristics compared with the other two:

• Multi-color icons are supported, and are no longer limited by monochrome.
• Through some skills, it supports adjusting the style through font-size and color like font.
• Compatibility is poor, support ie9+, and modern browsers.
• The performance of browser rendering svg is average, not as good as png.

The use steps are as follows:

Step 1: Import the symbol code generated under the project:

 

Step 2: Add general css code (import-only once):

.icon{
    width: 1em; 
    height: 1em;
    vertical-align: -0. 15em;
    fll: currentColor;
    overflow: hidden;
}

Step 3: Select the corresponding icon and get the class name, apply it to the page: 

        

        <svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-left"></use>
		</svg>

Then the little guy will come out, support color: 

 

 You can also adjust the icon size by setting the width and height of the svg label through the font size. Fill can modify the color of the icon, but the color of the multi-color icon cannot be modified:

                <svg class="icon" aria-hidden="true" style="font-size: 1rem;">
					<use xlink:href="#icon-jingpin"></use>
				</svg>
				
				<svg class="icon" aria-hidden="true" style="width: 1.5rem;height: 1.5rem;">
					<use xlink:href="#icon-caiseshijian"></use>
				</svg>

 

fontclass method

In fact, the demo_fontclass in the downloaded file has already been described in detail. Based on this, we will explain it again.

Font-class is a variant of unicode usage, mainly to solve the problem of unintuitive writing of unicode and unclear semantic meaning. Compared with unicode usage, it has the following characteristics:

• Good compatibility, support ie8+, and all modern browsers.
• Compared with unicode, the meaning is clear, and the writing is more intuitive. It is easy to tell what this icon is.
• Because the class is used to define the icon, when you want to replace the icon, you only need to modify the unicode reference in the class.
• However, because the font is essentially used, multi-color icons are still not supported.

6.2 The use steps are as follows:

Step 1: Import the fontclass code generated under the project:

<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2061876_8f94z0v2isf.css"/>

Step 2: Select the corresponding icon and get the class name to apply to the page:

<i class="iconfont icon-xin" style="width: 2rem;height: 2rem;font-size: .4rem;"></i>
<i class="iconfont icon-caiseshijian" style="width: 2rem;height: 2rem;font-size: .4rem;"></i>

 In this way, setting the label width and height is invalid, and setting the font size is valid. The icon style can be modified through the css color property. Multi-color icons are not supported:

 

unicode method

Unicode is the most primitive application method of fonts on the web side. Its characteristics are:

• It has the best compatibility, supports ie6+, and all modern browsers.
• Supports dynamically adjusting the icon size, color, etc. according to the font.
• But because it is a font, multi-color is not supported. Only single-color icons in the platform can be used. Even if there are multi-color icons in the project, it will be automatically decolorized.

Note: The new version of iconfont supports multi-color icons. These multi-color icons cannot be used in unicode mode. If there is a need, it is recommended to use the symbol reference method

7.2 The steps to use unicode are as follows:

Step 1: Copy the font-face generated under the project

@ font-face {

font-family: 'iconfont';

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg');

}

Step 2: Define the style of using iconfont

1. .iconfont{
2. font-family:"iconfont" !important;
3. font-size:16px;font-style:normal;
4. -webkit-font-smoothing: antialiased;
5. -webkit-text-stroke-width: 0.2px;
6. -moz-osx-font-smoothing: grayscale;
7. }

Step 3: Select the corresponding icon and get the font code, apply it to the page

class="iconfont">3i>

Just learned to write a blog, sorry for not writing well.