FontAwesome-js样式-1.1

最新推荐文章于 2022-06-23 11:16:39 发布

彩舒

最新推荐文章于 2022-06-23 11:16:39 发布

阅读量1.2k

点赞数

分类专栏：前端技术文章标签： FontAwesome

本文链接：https://blog.csdn.net/caishu1995/article/details/86302699

版权

前端技术专栏收录该内容

105 篇文章 1 订阅

订阅专栏

js的引用和css差不多。

如果是外部的，直接用

<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>

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

<script defer src="fontawesome-free-5.6.3-web/js/all.js"></script>
<!-- 我将压缩包解压到这个html同目录下，命名为fontawesome-free-5.6.3-web。大家可以按需更改 -->

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

放大缩小

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

<!DOCTYPE html>
<html lang="en">
<head><title>测试书的图标</title></head>
<body class="fa-8x">
    <i class="fas fa-book"  data-fa-transform="shrink-16" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="shrink-15" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="shrink-4" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="shrink-2" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="shrink-1" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="shrink-0" style="background:MistyRose"></i>
    <i class="fas fa-book" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="grow-1" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="grow-2" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="grow-4" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="grow-8" style="background:MistyRose"></i>
    <i class="fas fa-book"  data-fa-transform="grow-16" style="background:MistyRose"></i>

    <script defer src="fontawesome-free-5.6.3-web/js/all.js"></script>
    <!-- 我将压缩包解压到这个html同目录下，命名为fontawesome-free-5.6.3-web。大家可以按需更改 -->
</body>
</html>

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

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

相对位置

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

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

<i class="fas fa-book" data-fa-transform="shrink-8 up-8" style="background:red"></i>
<i class="fas fa-book" data-fa-transform="shrink-8 up-4" style="background:red"></i>
<i class="fas fa-book" data-fa-transform="shrink-8 up-2" style="background:red"></i>
<i class="fas fa-book" data-fa-transform="shrink-8 up-1" style="background:red"></i>
<i class="fas fa-book" data-fa-transform="shrink-8 up-0" style="background:red"></i>
<i class="fas fa-book"  data-fa-transform="shrink-8" style="background:red"></i>

相对位置

旋转

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

<i class="fas fa-book"></i>
<i class="fas fa-book"  data-fa-transform="rotate-30"></i>

<i class="fas fa-book"></i>
<i class="fas fa-book"  data-fa-transform="flip-h"></i>

<i class="fas fa-book"  data-fa-transform="rotate-180"></i>
<i class="fas fa-book"  data-fa-transform="rotate-90"></i>

<i class="fas fa-book"  data-fa-transform="flip-v"></i>
<i class="fas fa-book"  data-fa-transform="flip-v flip-h"></i>

掩蔽
先上代码。

<!-- 方法一：堆叠图形 -->
<span class="fa-stack" style="background-color: red">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-list-ul fa-stack-1x fa-inverse"></i>
</span>


<!-- 方法二：掩蔽 -->
<i class="fas fa-list-ul" data-fa-transform="shrink-6" data-fa-mask="fas fa-circle" style="background-color: red"></i>

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

堆叠图形

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

<span class="fa-layers fa-fw">
    <i class="fas fa-circle"></i>
    <i class="fas fa-list-ul fa-inverse" data-fa-transform="shrink-6"></i>
</span>

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

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

<span class="fa-layers fa-fw">
    <i class="fas fa-circle"></i>
    <i class="fas fa-list-ul fa-inverse" data-fa-transform="shrink-8 up-2 left-2"></i>
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-8 down-2 right-2" style="color: red"></i>
</span>

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

<span class="fa-layers fa-fw">
    <i class="fas fa-circle"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8" style="font-weight:900">27</span>
</span>

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

<span class="fa-layers fa-fw">
    <i class="fas fa-circle"></i>
    <span class="fa-layers-counter fa-layers-bottom-left" style="background:Tomato">1,419</span>
</span>

正常我们只需给我们数字加 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

彩舒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
FontAwesome-js样式-1.1

js的引用和css差不多。如果是外部的，直接用&lt;script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" cro...
复制链接

扫一扫