菜鸡学前端：图标icon的获取

推荐一个实用的图标库网址：http://www.fontawesome.com.cn/faicons/

举例操作：

1.首先需要将font awesome的工程下载到本地并解压，目录

例如我需要下载如下icon 

2.在图标库网址中选择所需的图标，右键检查元素

3. 进入到font awesome中的fonts目录下，实用notepad++打开fontawesome-webfont文件，在该文件中搜索步骤2中拷贝的内容，搜索结果如下：

 4.notepad可以新建空的文本，初始内容可以为下：

<svg viewBox='0 0 1792 1792' xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" height="20px" style="transform: rotate(180deg);">
  <path fill="#920505" d='M1024 161v190q0 14 -9.5 23.5t-22.5 9.5h-192q-13 0 -22.5 -9.5t-9.5 -23.5v-190q0 -14 9.5 -23.5t22.5 -9.5h192q13 0 22.5 9.5t9.5 23.5zM1022 535l18 459q0 12 -10 19q-13 11 -24 11h-220q-11 0 -24 -11q-10 -7 -10 -21l17 -457q0 -10 10 -16.5t24 -6.5h185
q14 0 23.5 6.5t10.5 16.5zM1008 1469l768 -1408q35 -63 -2 -126q-17 -29 -46.5 -46t-63.5 -17h-1536q-34 0 -63.5 17t-46.5 46q-37 63 -2 126l768 1408q17 31 47 49t65 18t65 -18t47 -49z'></path>
</svg>

说明：该XML中的width和height为你所要得到图标的长和高，一般需要设置成等长高的（否则会取更小的），path中的fill为你想设置图标的颜色，path中d的内容为步骤3中d的内容

修改自己所需的属性后则将该文本保存到本地

5.通过浏览器打开步骤4保存的文本，则图标可以在浏览器中进行显示，不过图标的格式为.svg，如果本地安装的edge浏览器则可直接将图标另存为.png格式并保存到本地就可以直接使用了。

6.如果步骤5中未安装edge浏览器，则可以进入http://jsfiddle.net/Na6X5/（本人比较常用）中进行在线转换，具体使用方法可参考https://*.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas 

 

例如： 

html代码：

<canvas id="canvas1" width="400" height="400"></canvas>//width height指定图片大小

js代码：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var path = new Path2D('M 100,100 h 50 v 50 h 50);
ctx.stroke(path);

执行代码，图标下载到本地，格式为.png

7.打完收工