My Little World

阿里巴巴iconfont使用

发表于

1.登录http://iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.QImsN2 进入搜索界面
2.通过输入关键字搜索自己想要的图标
3.将鼠标放到自己想要的图标会出现选择层，点击第一个购物车图标，添加入库
4.将所有想要的图标添加完后，点击右上角购物车图标打开项目添加页，点击“加入项目”右侧图标，为选择的图标新建项目,点确定
iconfont1
iconfont2
5.关闭项目添加页，点击导航栏的“图标管理”，进入“我的项目”栏目


图片名称
图片名称

6.使用图标到我们的HTML代码中，可以通过线上链接使用，也可以通过下载至本地使用

通过线上链接使用

1.点击查看在线链接,复制代码到项目的静态资源的css文件中一般在src/assets/css路径下的文件
2.设置一个类icon，通过这个类的属性改变图标样式，同时在HTML中引用这个类

1
2
3
4
5
6
7
8
9
10
11
.icon {
  font-family: "iconfont" !important;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  background-size: 100% auto;
  background-position: center;
  -webkit-font-smoothing: asntialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

3.在标签中添加icon类,在标签中间加入图标代码，例如：

下载至本地

1.点击下载至本地
2.将在线链接代码中用到的文件放到项目静态文件夹中，
3.将在线链接代码中文件的路径更改为项目中的文件路径，
4.其他步骤同线上路径
5.也可直接打开下载文件的IconFontDemo/assets/iconfont/的demo.html代码，看如何使用