傻瓜式教程——阿里云图标引入自己的项目

2,003 阅读1分钟

在项目中,总会遇到图标这种问题,阿里云的图标丰富、好看,90%可以满足你的图标需求(而且还免费!!),这里简单说下如何在项目中引入阿里云图标。

阿里云图标的官网连接

  1. 找到你想要的图标,添加到图库。 image.png
  2. 添加到的你的项目中

image.png

  1. 复制代码 image.png

4.在你的项目找到 public 下的 index.html 引入

    <link rel="stylesheet" href="https:+url">

注意,从阿里云复制过来是没有带协议的,要自行写上 https如果不添加 https,让浏览器每次都去判定是http,还是https ,那就浪费性能了image.png

  1. 在阿里云的图标复制代码,然后在你的项目中写入
<i class="iconfont icon-daohang"></i>

image.png

image.png

  1. 页面展示

image.png

  1. 回到第5步,也可重命名图标

image.png

public 下的 index.htm l引入更新的阿里云图标链接,代码同步更改

image.png

  1. 如果不要想要黑白的图标,想要彩色的图标,阿里云图标引入也有介绍。 这是他官网的介绍以及使用 image.png

更换彩色图标操作如图: image.png

一般项目中ui设计师会提供图标,但总是会有意外的时候。如果是彩色的图标,我个人觉得图片的形式会比较好。你们在开发中,如果需要自己找图,也是阿里云图标吗?还是有别的更好的方式?

哈哈,今天又是美好快乐的一天。