挑选图标的过程（共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. Mysql 之 MERGE 存储引擎

    MERGE 存储引擎把一组 MyISAM 数据表当做一个逻辑单元来对待,让我们可以同时对他们进行查询.构成一个 MERGE 数据表结构的各成员 MyISAM 数据表必须具有完全一样的表结构.每一个成员 ...

  2. .Net core 使用SSH.Net上传到SFTP服务器和和下载文件

    今天换了个服务器,文件上传到sftp服务器上了,那么ftp和sftp服务器有什么区别呢,正常来说sftp会更安全一些. 废话不多说,首先.net core 上传到sftp需要引入一个Nuget包,就是 ...

  3. free -g 说明

    free -g 说明: free -g -/+ buffers/cache 说明: buffer 写缓存,表示脏数据写入磁盘之前缓存一段时间,可以释放.sync命令可以把buffer强制写入硬盘 ca ...

  4. QP之QK原理

    QK是一个很小的抢占式微内核调度程序,它专用用QP中. QK的思想源于SST,Miro Samek重写了自己前期编的SST(Super Simple Task)代码. QK循环查询AO队列的状态表QK ...

  5. 全志A64 QT移植

    1. 把编译工具 gcc-linaro-aarch64.tar.xz 添加到环境.bashrc 中 2. 下载 tslib-1.4.tar.gz ,libiconv-1.15.tar.gz ,qt-e ...

  6. 基于傅里叶变换的音频重采样算法 (附完整c代码)

    前面有提到音频采样算法: WebRTC 音频采样算法 附完整C++示例代码 简洁明了的插值音频重采样算法例子 (附完整C代码) 近段时间有不少朋友给我写过邮件,说了一些他们使用的情况和问题. 坦白讲, ...

  7. Vue 生产环境部署

    简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...

  8. 修改注册表删除Windows资源管理器 “通过QQ发送” 右键菜单项

    运行regedit 展开至:HKEY_CLASSES_ROOT\AllFilesystemObjects\shellex\ContextMenuHandlers 删除QQShellExt项

  9. 菜鸟学Linux - 变量基本规则

    变量是一个很重要的概念,无论是bash脚本还是其他语言,都是如此.在bash中,创建变量很简单,给变量一个名称即可.默认情况下,变量的值为空.我们可以通过等号为变量赋值.需要注意的是,变量和变量的值不 ...

  10. Java中syso的封装

     将syso设置为由开关切换确实是个很不错的思想,这样就不用傻傻的一个个去找不用的syso进行删除或者注释 当然了,由网友所说,这叫日志系统情何以堪,这里想说的是这个开关的思想值得我这小白学习 此为看 ...