FontAwesome-js样式-1.1

    js的引用和css差不多。

    如果是外部的，直接用

    如果是已经解压的包，直接用

    这时候我们就不用引用css了。js里面会自动帮我们创建的。

 

放大缩小

    我们可以通过设置grow-开头（放大）或者shrink-开头（缩小）设置放大缩小任何值。他们这个还支持小数呢。每次放大和缩小的单位是1/16em。

    在这里我加了背景颜色，是为了标识。我先开始没加背景色，我还在思考为什么第一个图标左侧空的那么多。后来才发现16的时候图标就没了（因为 1-16/16=0）。

    如果你是个好奇宝宝，你可在现在打开f12看一下，现在你的那些标签都变成了svg标签了。

 

相对位置

    缩放以后我们可能也会进行一些简单的偏移。

    我们可以通过设置up-开头（向上）、down-开头（向下）、left-开头（向左）、right-开头（向右）设置偏移任何值，还支持小数呢。单位是1/16em。

 

旋转

    觉不觉得有点眼熟，我们在基础样式那里已经看到了旋转，为什么这里还有呢？我们之前仅用样式能完成5种旋转。但旋转方式和角度是固定的。js这里提供一些其它的方法。我们可以通过设置rotate-开头（旋转）、flip-h（水平镜像）、flip-v（垂直镜像）设置旋转。设置旋转角度时可以设置正或负数。

 

掩蔽
    先上代码。

    
    


​

    方法一是堆叠图形的代码，相当于两个不同形状堆在了一起。而方法二掩蔽，其实有点类似镂空，在data-fa-mask表示的图片区域内，盖上i标签表示的图片。

堆叠图形

    之前我们在基础样式里面了解过堆叠图形，当时我就试了下能不能堆叠多个，发现不行。但~我在这里发现了，哈哈。我们先来看看堆叠两个图形的代码，效果参见本小结最后第一个图形。

    这里给区域一个 fa-layers 。至于fa-fw只是居中更方便观看。里面有两个i标签。

    这里有一个重点就是，我们的span里面的内容，越后越在上层。针对这个问题，我们试试多个的情况，效果参见本小结最后第二个图形。

    这是多个图形堆叠的情况，如果我们想在图形上堆叠数字呢？我们需要加一个 fa-layers-text ，效果参见本小结最后第三个图形。

    
    27

    另外，他们还提供了类似邮件数字提醒的风格，效果参见本小结最后第四个图形。

    
    1,419

    正常我们只需给我们数字加 fa-layers-counter ，就可以在我们的右上角展示椭圆背景的数字。但这里我们可以通过 fa-layers-bottom-left  fa-layers-bottom-right  fa-layers-top-left fa-layers-top-right 。既可设置数字的位置。

参考：

    https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms