彩色字体图标icon的应用

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

1.  下载字体图标

        (1)网址导航至阿里巴巴字体图标库 https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.12&manage_type=myprojects&projectId=1022606&keyword=&project_type=&page=,在这里可以创建一个项目,将需要的字体图标加入到自己的项目,也可以让UI设计需要的字体图标。

彩色字体图标icon的应用_第1张图片

        (2)点击上图右上部的“下载至本地”下载字体图标文件,一般下载下来的压缩文件  demoload.zip 

2. 将下载的压缩包解压,放置在项目中。以实际的angular项目为例:

彩色字体图标icon的应用_第2张图片彩色字体图标icon的应用_第3张图片

3. 在项目中进行配置

彩色字体图标icon的应用_第4张图片

4. 在需要显示彩色字体图标的位置写代码

彩色字体图标icon的应用_第5张图片

5. 修改全局的css样式文件 style.css 或者 style.less

        复制图标库中的 @font-face类

彩色字体图标icon的应用_第6张图片        

        将style.css或者style.less文件中,已有的@font-face 类都注释掉,添加上面复制的@font-face类

6. 重新启动项目,浏览,就可以看到彩色字体图标

        彩色字体图标icon的应用_第7张图片

 

 

你可能感兴趣的:(前端开发,css,css)