挑选图标的过程（共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. centos7 使用指定邮箱发送邮件

    一.安装sendmail与mail .安装sendmail: ) centos下可以安装命令:yum -y install sendmail ) 安装完后启动sendmail命令:service se ...

  2. Python Homework 001

    1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 4 import getpass 5 name = "xilong" 6 pas ...

  3. 03JavaScript 输出

    JavaScript 输出 JavaScript 没有任何打印或者输出的函数. 先来一点DOM的小知识点: DOM 解释: 您会经常看到 document.getElementById("i ...

  4. 智能家居系统 Home Assistant 系列 --安装系统之Windows

    Home Assistant 是一个成熟完整的基于 Python 的智能家居系统. 首先得安装Python环境.在浏览器中访问Python官网 www.python.org 进入Downloads中的 ...

  5. python学习——面向对象的三大特性

    一.继承 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类. 1.python中类的继承分为:单继承和多继承 class P ...

  6. ACM数据结构-并查集

    ACM数据结构-并查集   并查集,在一些有N个元素的集合应用问题中,我们通常是在开始时让每个元素构成一个单元素的集合,然后按一定顺序将属于同一组的元素所在的集合合并,其间要反复查找一个元素在哪个集合 ...

  7. 156. Merge Intervals【LintCode by java】

    Description Given a collection of intervals, merge all overlapping intervals. Example Given interval ...

  8. JavaWeb——库存管理系统（1）jsp部分---18.12.13

    add.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"    pa ...

  9. nodeJs 安装 npm nodeModules package.json

    Nodejs   1.安装nodejs 从nodejs官网下载最新版本的node,设置环境变量这样就可以在cmd下直接用命令行操作npm 环境变量:path  d:/nodejs 查看本机node及n ...

  10. ORA-15032、ORA-15071错误处理

    遇到一下错误 ERROR at line 1: ORA-15032: not all alterations performed ORA-15071: ASM disk "NOCR_0002 ...