网站如何使用阿里icon
多多洛
在网页开发中经常会有各种图标,如果有专门的设计人员还好,可以设计各种图标,如果没有设计人员,想弄个图标确实很为难。
那么我们可以使用阿里的图标库 http://iconfont.cn/

1.添加图标

我们通过上述的网站,打开阿里图标库网站,根据中文,或者英文 来搜索我们想要的图标,找到你想要的图标然后加入购物车


然后点击


然后点击添加至项目

此时会让你登录,我们登录就好。
如果没有项目,可以新建一个项目,将图标都添加到一个项目中

2.按照项目生成在线css

将图标添加到项目中后,我们将图标生成在线可以使用的样式

我们使用font class
此时会有一个.css的文件,记住每次新增图标,或者修改了图标,我们要重新获取一下这个css的路径
 

3.使用图标


我们直接在页面中应用即可
引入css

<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_686448_845c2iid78wa5rk9.css">

这里就填写你在阿里图标库网站生成的样式,我们直接指向阿里的图标库cdn就行,不用将文件和样式下载到自己的服务器,这样可以减轻自己的服务器压力哦,而且阿里的这个访问速度杠杠的。

引入后就可以直接使用了
<i class="iconfont icon-comment"> class是有两部分组成,iconfont是固定的,后面就根据各个图标的 名称来选择了。这里引入的名称和图标下方的名称一致

这个名称也是可以修改的

我们使用的时候可以直接点击这里的复制代码,就会复制icon的名称了。
点击修改按钮修改图标

可以调整大小,颜色,还有名称。
因为是图标字体,所以颜色我们也可以在css里面去指定。
 
喜欢 |