Using iconfonts
Pesy Wu
Iconfont is another icon library provided by Alibaba Cloud. So if this can be used in navigation, i would appreciate it.
Pesy Wu
The project is different with the file name. Like the project in recent comment is
//at.alicdn.com/t/font_3177592_gb7ey5ajkie.woff2
, and the other project in my account is //at.alicdn.com/t/font_2220249_y92uxx83cwo.woff2
Pesy Wu
On this platform, user can add the icon made by other designer to their own project and import their project using css/js. For example
```html
<link rel="preload" href="//at.alicdn.com/t/font_3177592_gb7ey5ajkie.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Use preload to acclerate the loading speed, and then use the following to import the resource
Method 1
```css
@font-face {
font-family: 'iconfont'; /* project id 3177592 */
src: url('');
src: url('?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_3177592_gb7ey5ajkie.woff2') format('woff2'),
url('//at.alicdn.com/t/font_3177592_gb7ey5ajkie.woff') format('woff'),
url('//at.alicdn.com/t/font_3177592_gb7ey5ajkie.ttf') format('truetype'),
url('#iconfont') format('svg');
}
or using html to import the following resource
Method 2
//at.alicdn.com/t/font_3177592_gb7ey5ajkie.css
Method 3
//at.alicdn.com/t/font_3177592_gb7ey5ajkie.js
(Just use one of them)
Next, define the style of the icon
```css
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Finally, use the code to show the icon
```html
<span class="iconfont"></span>
The official usage of this library can be found at https://at.alicdn.com/t/project/3177592/d32f9861-600c-4cfe-80e4-a0296996a00d.html?spm=a313x.7781069.1998910419.46