阿里图标的使用

前言

• 我们在进行移动端的前端页面开发的时候必不可少的肯定是各种各样的图标
• 那么我们去哪里找这些漂亮又简洁实用的图标呢(阿里或各种图标库)
• 阿里图标怎么使下面开始介绍

阿里图标网站

https://www.iconfont.cn/

• 网站里有使用指导这里我简单的说一下步骤，具体的话想了解可以去了解下

一、查找图标

• 注册账号登录
• 在首页根据自己所需要图标的功能简称搜索查找
• 然后可以在图标上点击添加到库
• 根据自己的项目名称创建一个图标厂库用于存放对应的图标
• 把所需要的图标都添加到库之后还可以添加到项目就完成了图标的下载
• 找到我的项目在里面可以看到自己刚才添加的图标

二、项目引入图标

1.在线引用

• 点击生成网址

//at.alicdn.com/t/font_1102185_ediyys60gbc.css
这是我生成的网址
要引入的话直接放到link里就可以了
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1102185_ediyys60gbc.css">
注意的是前面要加http
使用的时候最常用的是
<div class="iconfont icon-selection"></div>

• 下载到本地使用

点击下载到本地
然后解压后会得到一个font开头的文件，可以把名字更改成font
然后放到项目中
引入
<link rel="stylesheet" href="../css/font/iconfont.css">
<div class="iconfont icon-selection"></div>

• 注意事项

图标是以字体的形式存在的，所以更改大小是通过font-size更改的
<div class="iconfont icon-selection"></div>
.icon-selection{
  font-size:18px;
}
然后值得注意的是两个引用方式都有优点和缺点
网址引用很方便，但是网址需要更新更改
本地引用很麻烦，每次导入新的图标都需要下载一次然后替换之前的文件夹，但是地址不需要变更
根据需要选择引入方式吧