彩色字体图标icon的应用

Dear 丶 2022-10-24 15:29 205阅读 0赞

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

## 1.  下载字体图标 ##

（1）网址导航至阿里巴巴字体图标库 [https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.12&manage\_type=myprojects&projectId=1022606&keyword=&project\_type=&page=][https_www.iconfont.cn_manage_index_spm_a313x.7781069.1998910419.12_manage_type_myprojects_projectId_1022606_keyword_project_type_page]，在这里可以创建一个项目，将需要的字体图标加入到自己的项目，也可以让UI设计需要的字体图标。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2][]

## 3. 在项目中进行配置 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 4][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 5][]

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

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

![20210130111835686.png][]

[https_www.iconfont.cn_manage_index_spm_a313x.7781069.1998910419.12_manage_type_myprojects_projectId_1022606_keyword_project_type_page]: https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.12&manage_type=myprojects&projectId=1022606&keyword=&project_type=&page=
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70]: /images/20221024/f5f04c595a6d44f4baf1b8add980c18c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210130105627891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/f87f5c95cdfd41599f94a96d56188c7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/f6ca6f6c90f141c5a77d139b9743dfb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/83fcbf8dc2114233a2964028ed24ff12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/6c9fff3b612448f7aa0dd977ccd02d71.png
[20210130111835686.png]: /images/20221024/0cea41d7f9a44856a95b24b0b60daa10.png