美文网首页App开发笔记-模仿【糖水】
【App开发笔记】2.3 走进iconfont的世界

【App开发笔记】2.3 走进iconfont的世界

作者: 7abbcd54a89d | 来源:发表于2017-08-23 18:44 被阅读0次

2.3.1 首先打开iconfont官网注册帐号并登录

2.3.2 在搜索中寻找我们需要的图标

搜索图标

2.3.3 在自己想用的图标上hover之后添加到购物车

hover
添加到购物车

2.3.4 点开右上角购物车将刚才选的图标添加到新的项目中

购物车
添加至项目
创建新项目
为项目起个名字

2.3.5 将字体文件下载到本地

i下载至本地

2.3.6 将所需文件,添加至自己的项目中

我把所有文件放在项目css/iconfont文件夹下

所需文件

2.3.7 去掉iconfont.css中

.iconfont {
  font-size:16px;
}

2.3.8 在ApiCloud项目中引用

① 首先在要引入图标的页面引入iconfont.css

 <link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>

② 利用fontclass的形式使用(具体可以看刚才压缩包中的demo_fontclass.html

 <i class="iconfont icon-phone H-font-size-22 H-vertical-middle" style="color: #9b9b9b"></i>

相关文章

网友评论

    本文标题:【App开发笔记】2.3 走进iconfont的世界

    本文链接:https://www.haomeiwen.com/subject/hgwrdxtx.html