一、制作：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. 【python】声明编码的格式

    来自:http://www.xuebuyuan.com/975181.html 编码声明必须在第一行或者第二行,且要符合正则表达式 "coding[:=]\s*([-\w.]+)" ...

  2. laravel 视图

    在实际开发中,除了 API 路由返回指定格式数据对象外,大部分 Web 路由返回的都是视图,以便实现更加复杂的页面交互,我们在前面已经看到过了视图的定义方式: return view('以.分隔的视图 ...

  3. Metasploit

    1.启动Metasploit 声明:本次渗透测试的主机是我自己在自己的攻击主机上搭建的另一个操作系统,为了真实性设置了常见的IP地址,如有重合但绝对不是任何实体公司或者单位的IP地址. 所以不承担任何 ...

  4. poj3107树的重心

    /*树的重心求法:两次dfs,第一次dfs处理出每个结点的size,以此求每个结点大儿子的size,第二次dfs将每个结点大儿子的size和余下结点数进行比较,所有结点里两个值之间差值最小的那个点就是 ...

  5. vsftpd中的local_umask和anon_umask

    umask是在linux中常见的一个东西,它其实是一个掩码.当然,也有umask这样一个命令,它是对用户建立的文件的默认属性的定义.该 定义为: 假设umask为022,则对于一个文件夹的话,它的默认 ...

  6. SpringBoot系列七：SpringBoot 整合 MyBatis（配置 druid 数据源、配置 MyBatis、事务控制、druid 监控）

    1.概念:SpringBoot 整合 MyBatis 2.背景 SpringBoot 得到最终效果是一个简化到极致的 WEB 开发,但是只要牵扯到 WEB 开发,就绝对不可能缺少数据层操作,所有的开发 ...

  7. python修改hosts

    #coding=utf-8 host = ['192.168.10.240 store.wondershare.com', '192.168.10.240 store.wondershare.jp', ...

  8. Android取得系统时间

    Time t = new Time();//实例化Time类 t.setToNow();//取得当前的系统时间 int month = t.month;//获取月 int year = t.year; ...

  9. python is和==的区别

    # ==和is # ==用来判断值是否相等# is是用看来判断是不是指定了同一个东西,判断是不是指向了同一个地址等 a = [11,22,33]b = [11,22,33] a == b # True ...

  10. DDD工作流持久化（十六）

    找到对应的sql文件执行sql语句 产生如下的表: 添加引用: 添加命名空间: using System.Activities.DurableInstancing; using System.Runt ...