挑选图标的过程（共6步）

  1. 进入网站：Iconfont网址：http://www.iconfont.cn
  2. 点击网站上方的“官方图标库”，选择自己喜欢的图标。在这里我选择天猫的图标库。
  3. 选择好自己喜欢的图标，你可以有两个选择，下载代码 和 添加至项目。
  4. 我们这两选择添加至项目，然后新建项目，并输入名称。
  5. 项目添加好后，会自动给我们转入到我们项目库中。点击查看在线链接。
  6. 生产css引入的代码，生成后就可以在项目首页index.html引入了。 
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">

图标的使用：

图标顺利引入到项目中，已经可以使用它们了，在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴，也可以自己写代码。

<i class="icon iconfont icon-hanbao"></i>

　　在各个组件中就可以使用了

这样在页面中就可以看到图标了。

iconFont 阿里巴巴矢量图标使用方法的更多相关文章

  1. iconfont阿里巴巴矢量图标库批量保存

    F12输入——var iconList = document.querySelectorAll('.icon-gouwuche1');for (var i = 0; i < iconList.l ...

  2. 微信小程序引用阿里巴巴矢量图标iconfont

    最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...

  3. 阿里巴巴矢量图标库（iconfont）批量全选的方法

    阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...

  4. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  5. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  6. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

  7. 阿里巴巴矢量图标的使用Demo

    一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ...

  8. IconFont --阿里巴巴矢量库

    超多的图标网站,可自己设置颜色,然后下载. IconFont --阿里巴巴矢量库

  9. 微信小程序里使用阿里巴巴矢量图标

    登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...

随机推荐

  1. nopCommerce电子商务平台 安装教程（图文）

    nopCommerce是一个通用的电子商务平台,适合每个商家的需要:它强大的企业和小型企业网站遍布世界各地的公司销售实体和数字商品.nopCommerce是一个透明且结构良好的解决方案,它结合了开源和 ...

  2. mybatis使用*号查询数据丢失问题

    使用*号的SQL语句:select * from 表名 在开发过程中可能你会发现使用mybatis框架爱作为持久层时,写的SQL语句在工具里面查询数据是可以查到想要的数据的,但是在项目中会出现数据丢失 ...

  3. ubuntu查找端口和kill

    查看 : netstat -anp | grep 8080 结束: kill -9 进程号

  4. jquery输入框动态查询l<li></li>列表

    1.html代码如下: 2.js代码如下: $('#search').bind('input propertychange', function () { searchKpoint(); }); fu ...

  5. iOS 清理Xcode项目中没有使用到的图片资源和类文件

    接手到一个旧的项目,但是发现里面有太多的无用资源,包括升级app后,一些无用的图片资源并没有被删掉,导致app在打包成ipa包以后,文件变大.手边这个项目IM要更换成环信的IM,之前的一些旧的SDK, ...

  6. SaltStack error: No module named 'salt'

    启动saltstack的时候出现下面的错误 问题原因 是因为我在centos7中安装了多版本的python导致的 解决方案 将文件下面文件首行更改成python2 [root@saltstack-12 ...

  7. ruby中的extend 和 include

    include include是把module中定义的instance_method给mixin,然后当做类的实例方法使用(是因为module本身不能使用module的实例方法),给类进行实例化一个对 ...

  8. leetcode add_binary 采坑记

    尽管add_binary在leetcode中是一个简单难度,但是踩了不少坑,记录一下 描述: 给两个字符串形式的二进制数,要求求和并输出字符串形式的结果,其中a和b均不为空字符串 样例: a=“101 ...

  9. Mybatis中Mapper的Xml映射文件中，除了常见的select|insert|updae|delete标签之外，还有哪些标签？

    还有很多其他的标签,<resultMap>.<parameterMap>.<sql>.<include>.<selectKey>,加上动态s ...

  10. 20155335 俞昆 2016-2017-2 《Java程序设计》第九周学习总结

    学号 2016-2017-2 <Java程序设计>第九周学习总结 ##JDBC入门 在正式介绍JDBC前,已知JDBC是用来执行SQL的解决方案,开发人员使用JDBC的标准接口,开发人员不 ...