转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）

具体描述

  • 在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢

具体操作

  1. 登录icomoon
  2. 点击右上角登录旁边的icoMoon App


3. 点击左上角的import Icon导入需要转换的svg图片


4. 点击右下角的Generate Font生成字体


5. 单独配置具体项目（可选）


6. 也可以在左上角的首选项进行输出具体设置（可选）


7. 点击右下角的download下载，可以得到一个压缩包

8.在项目中导入font字体文件后于css中使用时设置具体class即可

如何制作图标字体（如何将svg转换为css可用的图标字体）的更多相关文章

  1. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  2. SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png

    在项目中用到了amcharts,amcharts图标统计插件是利用SVG实现的,其自带下载png功能,但是不支持IE以下浏览器.因此研究了SVG转换为png,最终实现的效果是将amcharts生成一张 ...

  3. 开源图标字体 uiw-iconfont v1.2.6 发布，新增图标

    uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体. 更新内容 新增 map android-o das ...

  4. CSS精灵图与字体图标

    CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多 ...

  5. IIS无法加载字体文件(*.woff,*.svg)的解决办法

    在编写前端代码的过程中经常会遇到使用特定的字体(*.woff,*.svg),此时在加载字体时请求会被返回 Failed to load resource: the server responded w ...

  6. 100款免费的圣诞节矢量图标素材（PSD & SVG）

    圣诞节的脚步越来越近了.今天,我们给大家收集了100个美丽的圣诞矢量图标素材.这套圣诞矢量图标集包含 PSD 和 SVG 两种格式,基于 Creative Commons 协议,可以在商业和个人项目中 ...

  7. 通过SVG与CSS3实现向上图标

    需求 H5活动页需要用的图标很少,暂时没有使用iconfont的必要性,而通过图片的话额外增加UI的工作量以及增加请求数,前端也有很多实现简单图标的方法,所以就尝试自己去解决,写一个"返回顶 ...

  8. CSS 让 fontawesome 图标字体变细

    一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...

  9. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

随机推荐

  1. 管理员的基本防范措施 Linux系统安全及应用

    系统安全及应用一.账号安全基本措施① 系统账号清理② 密码安全控制③ 命令历史限制④ 终端自动注销二.SU命令切换用户① 用途及用法② 验证密码③ 限制使用su命令的用户④ 查看su操作记录补充三.L ...

  2. C语言：九宫格

    #include <stdio.h> /* 如下排列表示 A00 A01 A02 A10 A11 A12 A20 A21 A22 */ int main() { unsigned char ...

  3. java并发编程基础——线程通信

    线程通信 当线程在系统内运行时,程序通常无法准确的控制线程的轮换执行,但我们可以通过一些机制来保障线程的协调运行 一.传统的线程通信 传统的线程通信主要是通过Object类提供的wait(),noti ...

  4. python之数据驱动yaml操作

    Mail163.yaml配置文件如下: login_data: url : 'https://mail.163.com/'case1: user : '' passwd : '' errorText ...

  5. poj1182：食物链

    poj1182:食物链 听说是poj中最经典的一道并查集题目.我一做,果然很经典呢!好难啊!!!真的琢磨了很久还弄懂.这道题的重点就在于怎么用并查集表示题目中的关系环. 1. 题干 原题传送门1 原题 ...

  6. 【洛谷P1061 Jam的计数法】搜索

    分析 超级暴力,在尾部+1,再判断. AC代码 type arr=array[0..27]of longint; var st:string; a:array[0..27]of longint; s, ...

  7. 关于hashcode和equals方法说明

    一.前言 我们都知道,要比较两个对象是否相等时需要调用对象的equals()方法,即判断对象引用所指向的对象地址是否相等,对象地址相等时,那么与对象相关的对象句柄.对象头.对象实例数据.对象类型数据等 ...

  8. 前端基础EL表达式（八）

    一.什么是EL表达式? 1.什么是EL表达式? EL(Expression Language) 是为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言, ...

  9. Lambda 方法引用 构造器引用 数组引用

    一.方法引用 注意: 1.Lambda 体中调用方法的参数列表与返回值类型,要与函数式接口中的抽象方法的函数列表和返回值保持一致!2.若Lambda 参数列表中的第一个参数是实例方法的调用者,而第二个 ...

  10. odoo前后端交互详解

    为了简单叙述,暂时不考虑多个db的情况(主要是懒得说没有db或者多个db实例的情况)当odoo指定数据库开启服务时(也就是odoo-bin -d <some_db_name> ),我们使用 ...