官方博客
官方博客

FontAwesome静态旋转翻转图标类(fa-rotate&fa-flip)

对于一个FontAwesome图标有时我们希望它能旋转个多少度或者翻转一下来显示,而不是直接显示上去,也因此FontAwesome提供了两个类——fa-rotate和fa-flip。

fa-rotate类

运行实例

备注:fa-rotate与fa-flip的最大差别就在于fa-rotate是让图标进行旋转,而fa-flip是让图标进行翻转。如果你想逆时针旋转90度,相当于顺时针旋转270度。

以下为代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>FontAwesome静态旋转翻转图标</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <p>
    这是图标原始的样子:<i class="fa fa-shield"></i> <br />
    这是图标用fa-rotate顺时针旋转90度的样子:<i class="fa fa-shield fa-rotate-90"></i> <br />
    这是图标用fa-rotate顺时针旋转180度的样子:<i class="fa fa-shield fa-rotate-180"></i> <br />
    这是图标用fa-rotate顺时针旋转270度的样子:<i class="fa fa-shield fa-rotate-270"></i> <br />
    这是图标用fa-flip左右翻转的样子:<i class="fa fa-shield fa-flip-horizontal"></i> <br />
    这是图标用fa-flip上下翻转的样子:<i class="fa fa-shield fa-flip-vertical"></i> <br />
    </p>
</body>

</html>


2019-09-11 20:59:38
0 热度