挑选图标的过程（共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. Redis学习笔记(一)

    定义 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库. 从该定义中抽出几个关键信息,以表示Redis的特性: 存储结构:key-val ...

  2. Currency Helper

    using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; /// <summary> /// 货币 ...

  3. python应用：爬虫框架Scrapy系统学习第二篇——windows下安装scrapy

    windows下安装scrapy 依次执行下列操作: pip install wheel pip install lxml pip install PyOpenssl 安装Microsoft visu ...

  4. Python 爬虫 (二)

    cookiejar模块: 管理储存cookie,将传出的http请求添加cookie cookie存储在内存中,CookieJar示例回收后cookie将自动消失 实例:用cookjar访问人人网主页 ...

  5. 小程序开发-11-Promise正确用法与函数签名设计技巧

    配置taBar "tabBar": { "selectedColor": "#000000", "backgroundColor& ...

  6. golang for循环里面创建协程问题的研究

    原本想在一个for里面创建10个协程,这些协程顺序拿到for的递增变量,把这10个递增变量都打印出来.但事与愿违,于是做实验,查书,思考,写出以下记录. golang里,在for循环里面起协程,如下代 ...

  7. flash读写学习笔记与spi接口及简单测试验证（三）

    FPGA中的视频图像资源,以及想要永久存储的程序都是要存储在flash中,flash是FPGA一个不可缺少的部分,flash的种类有很多,根据winbond公司的128Mbit Qual SPI接口的 ...

  8. 20145209 2016-2017-2 《Java程序设计》第3周学习总结

    20145209 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 1.构造方法决定类生成对象的方式 用this将已存在的参数的值指定给此参数. 用new建立新 ...

  9. OI生涯回忆录（二）

    (二)NOIP2016之后到HLOI2017 之后变得有点颓废,因为有的地方难度上来了,碰见不会的题我就会放挺.又或者有时候题水,改完了就不思进取了.到了过年前那几天连着考了几天试,好像是长春那边冬令 ...

  10. Jmeter接口测试（二）工具介绍

    一.Jmeter文件目录介绍 ◆ bin:可执行文件目录 Bin 目录文件 jmeter.bat:windows 的启动文件 jmeter.log:日志文件 jmeter.sh:linux 的启动文件 ...