阿里巴巴彩色字体的应用步骤如下:
1. 下载字体图标
(1)网址导航至阿里巴巴字体图标库 https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.12&manage_type=myprojects&projectId=1022606&keyword=&project_type=&page=,在这里可以创建一个项目,将需要的字体图标加入到自己的项目,也可以让UI设计需要的字体图标。
(2)点击上图右上部的“下载至本地”下载字体图标文件,一般下载下来的压缩文件 demoload.zip
2. 将下载的压缩包解压,放置在项目中。以实际的angular项目为例:
3. 在项目中进行配置
4. 在需要显示彩色字体图标的位置写代码
5. 修改全局的css样式文件 style.css 或者 style.less
复制图标库中的 @font-face类
将style.css或者style.less文件中,已有的@font-face 类都注释掉,添加上面复制的@font-face类
6. 重新启动项目,浏览,就可以看到彩色字体图标
版权声明:本文为songlf521原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。