挑选图标的过程（共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. Ext自定义控件 - 自学ExtJS

    本文所有思想表达均为个人意见,如有疑义请多批评,如有雷同不甚荣幸. 转载请注明出处:Nutk'Z http://www.cnblogs.com/nutkz/p/3448801.html 在用到ExtJ ...

  2. 【TOJ 3600】Fibonacci II （对数+斐波那契通项式）

    描述 2007年到来了.经过2006年一年的修炼,数学神童zouyu终于把0到100000000的Fibonacci数列(f[0]=0,f[1]=1;f[i] = f[i-1]+f[i-2](i> ...

  3. php与java

    作者:eechen链接:https://www.zhihu.com/question/20377398/answer/141328982来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  4. centos总结linux下svn安装与使用

    一.安装篇 centos下yum安装 yum install subversion 查看安装是否成功: svnserve --version 查看安装内容与位置 rpm -ql subversion ...

  5. array of TVarRec 动态数组使用

    FDQuery.AppendRecord()里是一个array of TVarRec.我们一般都是直接用[Var1,Var2,...].这样手工输入,但如果增加的元素我们预先不知道,就要声明一个arr ...

  6. Redis,传统数据库,HBase,Hive区别联系

    首先介绍各个数据库: Redis: 传统数据库: HBase: Hive:

  7. python 自定义函数表达式 拟合求系数

    https://docs.scipy.org/doc/scipy/reference/tutorial/integrate.html https://docs.scipy.org/doc/scipy/ ...

  8. robotframework+appium，数字键盘输入问题，keycode，press keycode

    需要注意事项 appium自带的输入法应该是无法模拟控制键和基本键的,需要自行使用adb切换成搜狗或者android输入法,然后case完成之后记得切回appium输入法 appium模拟发送基本键命 ...

  9. ruby 字符串加密

    str = 'This is a test.rb!' #DES加密 puts str.crypt('salt') #MD532位加密 require 'digest' puts Digest::MD5 ...

  10. HyperLedger Fabric 1.4 kafka生产环境部署（11.1）

    11.1 Kafka模式简介       上一章介绍的Solo模式只存在一个排序(orderer)服务,是一种中心化结构,一旦排序(orderer)服务出现了问题,整个区块链网络将会崩溃,为了能在正式 ...