转自： 如何制作图标字体（如何将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. asp.net mvc中的安全性

    1.重复提交攻击:通过Bind特性指定要绑定和不绑定的值. 2.Cookie盗窃:阻止脚本对站点中Cookie的访问,webconfig文件中添加<HttpCookies domain=&quo ...

  2. QT从入门到入土（三）——文件的读写操作

     引言 文件的读写是很多应用程序具有的功能,甚至某些应用程序就是围绕着某一种格式文件的处 理而开发的,所以文件读写是应用程序开发的一个基本功能. Qt 提供了两种读写纯文本文件的基本方法: 用 QFi ...

  3. JM操作数据库

    [前言] 为什么要去直连数据库,去操作数据库? 因为在我们做自动化的时候,或者在大批量准备数据的时候,自动化的时候有时候会生成很多条页面上,接口上无法删除的数据,那么就很有很多的测试数据遗留在系统上, ...

  4. C语言：case详解

    C语言虽然没有限制 if else 能够处理的分支数量,但当分支过多时,用 if else 处理会不太方便,而且容易出现 if else 配对出错的情况.例如,输入一个整数,输出该整数对应的星期几的英 ...

  5. USB数据线 单独供电

    USB数据线上剪掉两个电源线,只保留两个是数据就无法传数据了.数据线传输数据需要通过芯片来进行数据交换,芯片的工作离不开电源,没有电源,芯片无法工作,当然也就无法传输数据了.电源线特别是负极线,同时还 ...

  6. Three.js-任意平面的镜像矩阵

    1. 什么是镜像变换 直接看下面这张图: 这张图很好的诠释了镜像变化,关于y轴的变化,关于x轴的变化.这种关于任意轴的变化,就是镜像了. 2d下的镜像矩阵变化 我们以图像关于Y轴镜像为例子:原图形和结 ...

  7. 给KVM添加新的磁盘

    给KVM添加新的磁盘 两种方案 1 添加虚拟磁盘文件 2 添加物理磁盘 硬件配置: 物理主机(宿主机):foundation 物理主机磁盘情况: 我们有三块物理磁盘,sda.sdb和sdc(这里都是S ...

  8. idea使用maven下载jar包，出现证书校验问题问题,unable to find valid certification path to requested target

    每次从github上下载下来的项目都报如下错误could not transfer artifact org.springframework.boot:spring-boot-starter-pare ...

  9. UnitTest+HTMLTestRunner实战

    框架 步骤 先建立images,reports,tools文件夹 把HTMLTestRunner.py放进tools中  文件内容  https://www.cnblogs.com/wangxue13 ...

  10. 5G[generation]的知识收集

    一.什么是5G? G的英文是"5 Generation",即第五代无线通讯系统. 二.发展历程 1G的速率只有2.4k.2G是64k.3G是2M.4G{2013年12月,我国第四代 ...