一、图标的本质
font-awesome图标是字体，专业术语叫 Icon Font，本质上是使用 PUA （ Private Unicode Area ）码位 Unicode 编码的字符，所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的，不一样的无非是编码。
二、绘制图片
理解了图标的本质，那图标转成文本就有了一个思路，把文本绘制到canvas上，就可以轻松获取到图片了
1.首先，创建一个html模板，引人font-awesome
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"/>
</head>
<body>
<i class="fa fa-address-book"></i>
<canvas id="canvas"></canvas>
</body>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
</html>2.获取到图标，并绘制到canvas上
//获取图标的字节编码
const icon = document.getElementsByClassName("fa-address-book");
const character =
window.getComputedStyle(icon[0],":before").getPropertyValue('content').replace(/\"/g,"");
//在canvas上绘制图标
const canvas2 = document.getElementById("canvas");
canvas2.width = 200;
canvas2.height = 500;
const ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "#000000";
ctx2.font = "24px FontAwesome";
ctx2.textAlign = "center";
ctx2.textBaseline = "middle";
ctx2.fillText(character, 50, 100);
//获取图片base64编码格式的图片
const dataURL = canvas.toDataURL("image/png");
document.getElementsByTagName("img")[0].setAttribute("src",dataURL);三、应用扩展
理解原理后，我们就可以进行很多应用操作，这里举个例子，更换光标样式
//创建一个图标dom元素，获取到图标的字节编码后移除图标dom元素
const icon = "fa fa-address-card-o";
const tempElement = document.createElement("i");
tempElement.className = icon;
document.body.appendChild(tempElement);
const character = window.getComputedStyle(document.querySelector('.fa-address-card-o'), ':before').getPropertyValue(
'content').replace(/\"/g, "");
tempElement.remove();
//创建一个canvas元素
var canvas = document.createElement("canvas");
canvas.width = 24;
canvas.height = 24;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.font = "24px FontAwesome";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(character, 12, 12);
const dataURL = canvas.toDataURL('image/png');
canvas.remove();
//更改光标样式
document.querySelector('body').style.cssText = "cursor:url(" + dataURL + "),auto";html中为何经常使用<i>标签来作为小图标呢？
很多网站都是习惯使用<i></i>来代表小图标？而实际上用 <i> 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写），那么用<i>表示小icon，是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?
微信分享图标设置，以及wx.config配置
页面分享微信显示小图和描述的功能，微信就会抓取这张图片做为分享图片，微信对自定义分享内容作了限制，于是最终还是得回到配置wx.config上来。
利用伪元素:before和:after插入图标
如果你想在网页的某些文字前加图标或者想改变li元素默认的图标，你会如何做？本文价绍一种不用再额外添加html标签，存粹利用css就能插入或者自作图标的方式。
HTML中title前面小图标的实现_如何给网页标题添加icon小图标
今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的，为了兼容性考虑，使用的颜色不要超过16色，这里这个图标的命名要求必须为favicon.ico
css图标库_css常用的矢量图标大全
这篇文章主要介绍前端常用的css图标库有哪些？比如：阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等，使用css图标,可以通过样式对他进行设置字体颜色，大小等
网页中favicon.ico图标的作用、尺寸、制作
网站favicon.ico文件的用途很简单，就是在浏览器标签里，最前面显示的那个logo，对于网站 favicon.ico 图标的大小，建议大家选择 16x16 或者 32x32，再大也是完全没有必要的。favicon.ico
图标使用新姿势- react 按需引用 svg 的实现
图标是前端在业务开发中不得不写的一个东西，以我司的几个部门为例，每个组在写图标上都有不一样的方式：用户平台：单色图标用 iconfont 上提供的字体文件，彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。
Bootstrap图标
小图标icon是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标，Bootstrap框架中的图标都是字体图标
纯css制作电闪雷鸣的天气图标
使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案；after伪元素写下面的投影样式；before伪元素写黄色闪电的样式；用两个嵌套的div容器就可以了，父容器来控制图标显示的位置
字体图标的使用步骤
字体图标的优点：体积小，本质是字体，可以改变颜色，大小，背景等。UI人员设置svg格式交给前端人员；前端上传svg格式生成兼容性字体文件包；下载兼容性字体文件包到本地
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!