一、制作：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. 【sqli-labs】Less18~Less22

    Less18: User-Agent注入,有错误回显 感叹一句,越来越难了.现在只能先看代码再分析怎么注入了..... 通过代码,发现username和password均做了校验.但是会有一个插入us ...

  2. cf1143E 倍增好题！

    一开始感觉用莫队可以搞一下,但是看了题解才发现这题其实是倍增套路题 把排列转换成nxt数组,然后倍增dp[i][j]表示第i个数后面有(1<<j)个数的最靠左的区间 然后从右往左扫一次即可 ...

  3. java常用的中间件

    tomcatWeblogicJBOSSColdfusionWebsphereGlassFish 一般本地开发的话建议使用tomcat. linux系统建议使用jetty或apache hpptd 大型 ...

  4. C++ Primer 笔记——枚举类型

    1.和类一样,每个枚举类型定义了一种新的类型.枚举属于字面值常量类型. 2.C++包含两种枚举:限定作用域的和不限定作用域的.C++11新标准引入了限定作用域的枚举类型. }; // 限定作用域的枚举 ...

  5. 使用Java及相关内容的目标

    培养设计高性能并发服务器架构能力. 基于高性能并发,创新应用和服务.

  6. tempalte模板

    tempalte模板层: 功能:为了更有逻辑的将数据库中的数据渲染到模板中: 模拟数据源: DB = [ {"hostname":"c1.com"," ...

  7. Django目录结构分析

    Django目录结构分析: Django的Linux项目目录记录 [root@cmdb Django]# tree mysite mysite ├── cmdb │   ├── admin.py # ...

  8. linux服务器上简单命令

    linux命令 1.ifconfig 查看 设置ip: 2.连接另一台linux 命令 ssh; 3.查看尾部 新追加内容 tail -f; 4.ln -s 原命令 新命令路径: 5.创建一个空文件 ...

  9. eclipse工具下hadoop环境搭建

    eclipse工具下hadoop环境搭建:    window10操作系统中搭建eclipse64开发系统,配置hadoop的eclipse插件,让eclipse可以查看Hdfs中的文件内容.     ...

  10. Hadoop集群最迅速的配置免密码登陆方法

    1:多台机器互相免密登陆的思路(默认你的linux操作系统已经安装好ssh): 第一步:在各自的机器上面生成密钥: 在第1台机器上生产一对钥匙: ssh-keygen -t rsa 在第2台机器上生产 ...