一、制作：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. 【splunk】按时间统计并找到异常值

    场景: 有长时间对多个端口访问的日志数据,每天对端口的访问量是稳定的.如果某一天对某个端口的访问量突然增加表示可能出现了问题.现在要通过splunk找到异常值. 思路: 统计每个端口每天的访问量.统计 ...

  2. Web Penetration Testing w3af fierce

    1.启动wsaf工具,设置载入插件(攻击模型的插件),可以设置默认的攻击模型,也可以添加自己的plug. 2.在侦查的时候渗透邮箱需要知道,云行邮箱服务的托管服务器是什么类型,在之前的博客中我已近两提 ...

  3. 网络扫描信息收集基于（Windows）

    1.首先说明一下一款网络扫描工具,在之前的博客中我曾简要的写过关于Advance IP Scanner使用方法,最近要写网络扫描的工具,所以对这款工具做一个详细的功能细节上的介绍. 如下图  在输入框 ...

  4. SSM + Android 网络文件上传下载

    SSM + Android 网络交互的那些事 2016年12月14日 17:58:36 ssm做为后台与android交互,相信只要是了解过的人都知道一些基本的数据交互,向json,对象,map的交互 ...

  5. hive和hbase比较（整理）

    hive1.可以理解为一种SQL执行引擎,对SQL的支持最终转换为map/reduce任务2.不支持更新.删除操作,但可以插入3.任务不是实时执行,用时一般为数分钟到数小时4.本身可以不存储数据,只存 ...

  6. bootstrap的模拟单选按钮

    <div class="btn-group" data-toggle="buttons" id="radio"> <lab ...

  7. 完美解决gradle下载慢的问题

    修改项目根目录下的文件 build.gradle ,使用国内阿里云镜像仓库地址. buildscript { repositories { maven{ url 'http://maven.aliyu ...

  8. 全球免费公共 DNS 解析服务器 IP 地址列表推荐 (解决无法上网/加速/防劫持)

    除了宽带提供商的 DNS 以外,像阿里云.腾讯云.Google.百度.IBM.CNNIC 等一些有足够实力的大型互联网公司也非常慷慨地为公众提供了免费的 DNS 解析服务器.异次元这就搜集了全球范围内 ...

  9. webpack学习笔记--配置plugins

     Plugin Plugin 用于扩展 Webpack 功能,各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情. 配置 Plugin Plugin 的配置很简单, plugi ...

  10. Angularjs 学习笔记-2017-02-06-双向数据绑定

    NG: ng-bind:  标签属性 ng-bind=" obj.xxx  " ,不会出现 用于区别{{ }} 标签,当页面未加载完毕时可以看到{{}}标签,非常不雅观,ng-bi ...