彩色字体图标icon的应用

      阿里巴巴彩色字体的应用步骤如下:

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版权协议,转载请附上原文出处链接和本声明。