一、制作：IcoMoon

这个教程一搜一大把，是很方便快捷的一种方式，提供上传、编辑或者选择IcoMoon-Free下载可以直接拿来用了。 
网址：https://icomoon.io/app/

上传需要制作成iconfont的svg图片，点击import iconts--generate font--download

二、使用方法

使用步骤如下：

第一步：引入项目下面生成的fontclass代码：

<link rel="stylesheet" type="text/css" href="./iconfont.css">

第二步：在fonts文件夹引入font字体文件

例如icomoon.ttf

第三步：挑选相应图标并获取类名，应用于页面：

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

IconFont 图标制作和使用的更多相关文章

  1. 00字体图标iconfont的制作与使用--阿里矢量图库

    一.iconfont的使用范围 在工作当中,经常会用到嵌在元素里的小图标 在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果.但是如果这么做的话,就必须把图片一个个切下 ...

  2. icon-font图标介绍

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...

  3. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  4. 如何引入iconfont图标与Element-UI组件

    一.iconfont图标 iconfont方便又好用,介绍一下如何在vue项目中引入iconfont 1.进入iconfont官网 www.iconfont.cn 2.登录自己账户 3.选择图标后下载 ...

  5. 使用iconfont图标

    iconfont.cn基本使用 登录iconfont.cn网站,直接使用github账号即可登录 输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库' 点击网站右上角的购物车图标,查看当前已入 ...

  6. veu——引入iconfont图标

    我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...

  7. 在线图标制作，格式转换 ICON

    在线图标制作,格式转换 https://www.easyicon.net/covert/

  8. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  9. JMeter快捷键图标制作 去掉cmd命令窗口

    使用jmeter时: 如果使用默认的jmeter.bat启动的话,会出现一个CMD命令窗口之后再会启动jmeter工作界面 直接启用ApacheJMeter.jar文件即可跳过CMD命令窗口启动jme ...

随机推荐

  1. LeetCode（104）：二叉树的最大深度

    Easy! 题目描述: 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例:给定二叉树 [3,9,20,null, ...

  2. WireShark 实例分析笔记（概念）

    1.嗅探器工作原理(中文版) 安装软件的附带WinPcap(实现从网卡接受数据可视化) 数据嗅探器工作原理,  第一:收集数据(数据包嗅探器从网络线缆上收集原始二进制数据,选定特定网卡设置混杂模式来完 ...

  3. SQLmap注入启发式检测算法

    1.经过setTargetEnv()就进入了checkWaf()的环节 def checkWaf():     """     Reference: http://sec ...

  4. HTML&javaSkcript&CSS&jQuery&ajax-Css

    CSS 1 .eg <head> <style> body{ background-color:#d0e4fe;} h1{ color:orange; text-alin:ce ...

  5. Pycharm同步本地代码至GitHub

    注册github账号 github地址,进入注册账号 安装git Windows下载地址1 Windows下载地址2 在官方下载完后,双击exe文件进行安装,安装到Windows Explorer i ...

  6. 检查URL的可用性脚本

    #!/bin/bash check_url() { HTTP_CODE=$(curl -o /dev/ -s -) ];then echo "Warning: $1 Access failu ...

  7. Sqoop使用，mysql,hbase,hive等相互转换

    Sqoop 是一款用来在不同数据存储软件之间进行数据传输的开源软件,它支持多种类型的数据储存软件. 安装 Sqoop 1.下载sqoop并加mysql驱动包 http://mirror.bit.edu ...

  8. Java集合源码学习（四）HashMap

    一.数组.链表和哈希表结构 数据结构中有数组和链表来实现对数据的存储,这两者有不同的应用场景,数组的特点是:寻址容易,插入和删除困难:链表的特点是:寻址困难,插入和删除容易:哈希表的实现结合了这两点, ...

  9. 标准C语言实现基于TCP/IP协议的文件传输

    TCP/IP编程实现远程文件传输在LUNIX中一般都采用套接字(socket)系统调用. 采用客户/服务器模式,其程序编写步骤如下:  1.Socket系统调用  为了进行网络I/O,服务器和客户机两 ...

  10. springboot的三种启动方式

    一:IDE 运行Application这个类的main方法 二:在springboot的应用的根目录下运行mvn spring-boot:run 三:使用mvn install 生成jar后运行 先到 ...