原文网址：https://www.youyong.top/article/11593a523d3b3
有朋友问我字体图标如何怎么变大的问题（他用的bootstrap自带的glyphicons）， 呦，还真没考虑过这个问题，平常都是直接用，尺寸都合适，也没改过大小，于是决定研究一下
原文网址：https://www.youyong.top/article/11593a523d3b3
添加width,height，不好使，标签变大了，但图标没变大
于是再去看 bootstrap中的
Glyphicons 字体图标
发现他们的图标就比用的大，再看他们的CSS，就明白是怎么回事了
其实想想也很对，字体图标，就是字体，字体怎么变大，当然是设置 font-size啦。
记得用过的Font Awesome是这么介绍的：
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
在看这个问题的过程中，看到一篇让图标变细的文章 《一句 CSS 让 fontawesome 图标字体变细》，如下
自从 iOS 某个版本发布之后，前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细。而很久之前就以发布的 fontawesome 很显然已经跟不上流行的趋势了，不过在现代的浏览器里，倒是可以让 fontawesome 改头换面，重获青春。
在 CSS3 里，有一个叫做 text-stroke 的属性，它的作用听上去很无用，就是在字体的边缘处描上细线，就如你当前看到的这段话一样，有点 80 年代美国广告常用的字体效果的赶脚……
上段落代码，了解 -webkit-text-stroke 用法。注意虽然有 -webkit- 前缀，但目前 IE 和 Firefox 也支持带 -webkit- 前缀的此属性…… 这是被 chrome 和 safari 这些 webkit 内核的浏览器逼得多惨……
<p style="-webkit-text-stroke: 1px gray; color: white; font-size: 2em">注意这个属性看上去类似此段所用的 text-shadow 属性，但仔细看 text-shadow 只能往外扩散阴影，而 text-stroke 可是同时往字体内部和外部填充的。
利用 text-stroke 这个特性，将描边的颜色设置成跟背景一样，就等于变相将字体变细了，比如当前你看到的可能是你见过最细的字体了！而此属性最棒莫过于用在 fontawesome 的图标上！
比如这个大家最爱最离不开的图标，原版是这样：
经过『细化』之后：
当然，镂空的图标，则是将描边的颜色设置成跟字体一样的颜色：
vs
虽然比较 hack，但不失为一种成本很低的做法
提示：使用火狐或 Chrome 等亲近程序员的浏览器右键点击图标或者字体，选择『查看元素』可看代码，以上效果都真是 CSS 做出来的不是效果图……
