阿里图标库的几种引入方式

背景

在做 uni-app 项目时，遇到图标的开发。提供两种思路

Google开发专家带你学 AI：入门到实战（Keras/Tensorflow）（附源码）

做图标的两种方式

切图

在有美工的情况下，直接让美工进行切图。也无需调整样式。图标大小也还好。

使用阿里图标

阿里巴巴图标库

第一种引入方式(下载文字图标到本地）

1、 下下载字体到本地

2、引入到项目中

把 .css 文件引入到项目中即可

使用即为

在线引入

选择引入的格式

在线引入的几种方式

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
链接前都需要加上 https

https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

@font-face {
  font-family: 'iconfont';  /* project id 1051152 */
  src: url('https://at.alicdn.com/t/font_1051152_0wmecbaedmq.eot');
  src: url('https://at.alicdn.com/t/font_1051152_0wmecbaedmq.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_1051152_0wmecbaedmq.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_1051152_0wmecbaedmq.woff') format('woff'),
  url('https://at.alicdn.com/t/font_1051152_0wmecbaedmq.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_1051152_0wmecbaedmq.svg#iconfont') format('svg');
}

单独下载对应的 png 图片

可以自己调整大小和颜色。独立引入