一、制作：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. 如何修改PDF文件内容，PDF怎么添加背景

    很多的情况下,大家都会遇到PDF文件,不管是在学习中还是在工作中,对于PDF文件,文件的修改编辑是需要用到PDF编辑软件的,在编辑文件的时候,发现文件的页面是有背景颜色的,又该如何修改背景颜色呢,不会 ...

  2. webstorm ps

    2018WebStorm注册码   2018-10-10 2018年08月22日 17:36:58 阳光明媚的味道 阅读数:6325   8月21日 http://webstorm.autoseasy ...

  3. css3三角形冒泡泡图形制作

    图一: 图二: <!DOCTYPE html> <html> <head> <title>css 三角形</title> <style ...

  4. Linux 命令行敲命令 光标移动快捷键

    在单词之间跳转,使用Ctrl+左右键. Ctrl+a跳到本行的行首, Ctrl+e则跳到页尾. Ctrl+u删除当前光标前面的文字 ctrl+k-删除当前光标后面的文字 Ctrl+w和Alt+d-对于 ...

  5. python全栈开发day53-mysql

    mysql的使用 (1)下载 解压到指定的目录. (2)取到C:\mysql-5.7.22-winx64\mysql-5.7.22-winx64\bin路径 添加到系统的环境变量中,后面一定要加分号. ...

  6. Python_shelve模块

    shelve:对象持久化的保存的模块,将对象保存到文件里  (默认的数据存储文件为二进制),可持久化任何pickle可支持的Python数据格式 shelve 中唯一的方法: shelve.open( ...

  7. 伪分布式hbase从0.94.11版本升级stable的1.4.9版本

    Hbase从0.94.11升级到stable的1.4.9版本: 升级思路: hadoop1.1.2    hbase 0.94.11                             ↓ had ...

  8. SPOJ LCS - Longest Common Substring 字符串 SAM

    原文链接http://www.cnblogs.com/zhouzhendong/p/8982392.html 题目传送门 - SPOJ LCS 题意 求两个字符串的最长公共连续子串长度. 字符串长$\ ...

  9. BZOJ1951 [Sdoi2010]古代猪文 中国剩余定理 快速幂 数论

    原文链接http://www.cnblogs.com/zhouzhendong/p/8109156.html 题目传送门 - BZOJ1951 题意概括 求 GM mod 999911659 M=∑i ...

  10. day64 url用法以及django的路由系统

    此篇博客是以备后查的,用到的时候记得过来查找即可! 路由系统:就是我们的django项目创建的时候自带的那个urls.py 它本身里面是映射的对应关系,一个大的列表里面,一个个元祖,元祖里面是url或 ...