字体图标任意缩放不会失真,也大大减少请求数量,非常好用。

在线生成工具:https://icomoon.io/app/#/select

在线SVG图库(阿里),  用于导入:http://www.iconfont.cn/search/index?q=%E9%92%B1&page=1

1、进入网址:主页面

2、新建一个图集

3、添加.svg图片(可以使用现成的,也可以使用自定义的)

使用现成的点击页面红色的Add Icons...

使用自定义的直接拖拽进图集即可添加

4、生成字体文件

(1)切换工具栏 “选择” 标签(见下图),选择好要生成的图标(自由选择)

(2)点击底部的:"Generate Font F"

可以自由命名 具体图标的样式名:

5、修改完成后,点击生成Font

下载压缩文件,解压:

运用:将fonts文件夹全部内容和style.css文件放到相应的项目中。

根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

当然添加字体还需要设置font-size,也可以根据实际情况设置color改变其颜色。

icomoon:生成字体图标的方法并应用的更多相关文章

  1. 详解使用icomoon生成字体图标的方法并应用

    原文:http://blog.csdn.net/u013938465/article/details/50680468 最近项目大量用到字体图标,大家也知道,字体图标任意缩放不会失真,也大大减少请求数 ...

  2. 使用icomoon把svg图片生成字体图标

    今天看了使用icomoon来将svg转换成图标字体,本来是不会使用别人给的svg,也不清楚具体的好处是什么,查了svg以后,越来越懵,svg挺好的为什么要转成图标字体呢. 一.SVG介绍 SVG 是一 ...

  3. MFC exe文件生成的图标更改方法

    MFC exe文件生成的图标更改方法 https://blog.csdn.net/txwtech/article/details/92980545

  4. icomoon.io生成字体图标

    1. 准备svg图片 2. 打开icomoon选择icomoon App 3. import icons 上传本地的svg图片 4. 点击选中以后点击generate fonts形成字体图标 5. p ...

  5. 第104天:web字体图标使用方法

    字体图标经常使用的是 阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 一.阿里库字体图标使用 第一步: 首先进入阿里巴巴矢 ...

  6. 微信小程序使用字体图标的方法

    一.先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二.到这个平台https://tran ...

  7. SVG生成字体图标详解

  8. css - 字体图标的制作

    很多的时候我们在开发过程中一般都是直接使用图片,尤其在移动页面频繁请求图片对性能不是很好 ,所以图标字体的应用也越来越广泛.一般情况下直接用的是font awesome字体,但是有时候需要制作自己风格 ...

  9. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

随机推荐

  1. 『TensorFlow』SSD源码学习_其七:损失函数

    Fork版本项目地址:SSD 一.损失函数介绍 SSD损失函数分为两个部分:对应搜索框的位置loss(loc)和类别置信度loss(conf).(搜索框指网络生成的网格) 详细的说明如下: i指代搜索 ...

  2. localStorage、sessionStorage用法以及区别

    设置: sessionStorage.setItem("key", "value");localStorage.setItem("site" ...

  3. pytoch word_language_model 代码阅读

    参考代码地址:https://github.com/pytorch/examples/tree/master/word_language_model /word_language_model/data ...

  4. 配置Beyond Compare作为比较和合并工具

    配置方法 建议配置在~/.gitconfig中. Linux下 [diff]    tool = bc3[difftool]    prompt = false[merge]    tool = bc ...

  5. leetcode 总结 动态规划问题小结

    动态规划 动态规划对于子问题重叠的情况特别有效,因为它将子问题的解保存在表格,当需要某个子问题的解 时,直接取值即可,从而避免重复计算. 基本思路与策略 基本思想与分治法类似,也是将带求解的问题分解为 ...

  6. 在Linux终端安装Julia

    官方参考文档:https://julialang.org/downloads/platform.html#generic-binaries 一.centos终端安装 打开Linux终端输入 sudo ...

  7. 世界上最好的Sed教程

    这是一份世界上最好的sed教程,sed是unix系统下流编辑里的超人.最初我写这份说明是为了我的 第二本电子书,然而随后我决定把这份说明变成一本免费电子书预览的同时再次做为文章发布到这里. Sed说明 ...

  8. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  9. HTML5:链接与路径

    链接与路径 一.路径 绝对路径——指包含服务器协议的完全路径 相对路径——指被链接文档相对于当前文档的路径. 二.超链接<a> 1.语法: <a href=“目标”>链接文本& ...

  10. C#获取文件目录

    Form1.cs using System;using System.Collections.Generic;using System.ComponentModel;using System.Data ...