转自： 如何制作图标字体（如何将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. viewport深入理解和使用

    什么是viewport ? viewport是用户网页的可视区域,也可叫做视区.手机浏览器是把页面放在一个虚拟的窗口(viewport)中,通常这个虚拟的窗口比屏幕宽,这样就不用把网页挤到很小的窗口中 ...

  2. Java多线程系列-基本概念

    Java的线程基本用法 创建线程 创建线程的方法: 实现Runnable接口 首先我们查看Runnable接口的定义: package java.lang; @FunctionalInterface ...

  3. 转载：使用jquery刷新当前页面以及其他js知识积累

    转载:https://www.cnblogs.com/heguihui/p/10505949.html 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.loc ...

  4. robotframework - database操作（增删改查）

    1.前置配置条件准备 a.mysql环境配置ok b.robot环境配置ok c.pip 安装robotframework-databaselibrary 2.mysql数据操作 -->以操作 ...

  5. 【JavaWeb】请求和响应Request&Response

    请求 请求对象 关于请求 顾名思义,意思就是请求一个"对象" 请求不到的,别想了 请求,就是使用者希望从服务器端索取一些资源,向服务器发出询问.在B/S架构中,就是客户浏览器向服务 ...

  6. Docker编排利器DockerCompose

    Docker 编排利器 DockerCompose,编排之后可以一次性通过一条命令启动一组服务 例如一条命令启动 SpringBoot 项目,同时启动 SpringBoot 项目依赖的其他中间件(My ...

  7. Nginx反向代理访问内网服务器

    Nginx反向代理访问内网服务器 问题描述 ​ 公司给配的台式机太垃圾了,不能访问外部网络就算了,还没有maven私服.近期项目不光得使用maven还得使用内网中的数据库之类,台式机太卡只能用自己的笔 ...

  8. 当vue 页面加载数据时显示 加载loading

    参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...

  9. Java中9种常见的CMS GC问题分析与解决

    1. 写在前面 | 本文主要针对 Hotspot VM 中"CMS + ParNew"组合的一些使用场景进行总结.重点通过部分源码对根因进行分析以及对排查方法进行总结,排查过程会省 ...

  10. Spring Cloud分区发布实践(4) FeignClient

    上面看到直接通过网关访问微服务是可以实现按区域调用的, 那么微服务之间调用是否也能按区域划分哪? 下面我们使用FeignClient来调用微服务, 就可以配合LoadBalancer实现按区域调用. ...