带边框和拉伸的图标

您可能偶尔希望将文本环绕图标或使用边框使其在视觉上有所区别。

开始之前

在我们开始之前，请确保您

• 在项目中设置 Font Awesome。
• 熟悉 添加 Font Awesome 图标 的基础知识。

使用 fa-border 和 fa-pull-right 或 fa-pull-left 来轻松实现拉取引文或文章图标。

盖茨比相信绿灯，相信那一年年复一年地向我们退去的狂喜的未来。它当时逃避了我们，但这没关系——明天我们将跑得更快，伸展我们的手臂更远……在一个美好的早晨——所以我们奋力前行，船逆流而上，不断被拉回过去。

<i class="fa-solid fa-quote-left fa-2x fa-pull-left"></i>
Gatsby believed in the green light, the orgastic future that year by year
recedes before us. It eluded us then, but that’s no matter — tomorrow we will
run faster, stretch our arms further... And one fine morning — So we beat on,
boats against the current, borne back ceaselessly into the past.

将 fa-border 与 fa-pull-right 样式结合使用，以获得更明显的视觉分离。

盖茨比相信绿灯，相信那一年年复一年地向我们退去的狂喜的未来。它当时逃避了我们，但这没关系——明天我们将跑得更快，伸展我们的手臂更远……在一个美好的早晨——所以我们奋力前行，船逆流而上，不断被拉回过去。

<i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border"></i>
Gatsby believed in the green light, the orgastic future that year by year
recedes before us. It eluded us then, but that’s no matter — tomorrow we will
run faster, stretch our arms further... And one fine morning — So we beat on,
boats against the current, borne back ceaselessly into the past.

带边框和拉伸的类

类	详细信息
fa-border	在图标周围创建具有 border-radius 和 padding 的 border
fa-pull-left	通过将图标 浮动 到左侧并应用 margin-right 来拉伸图标
fa-pull-right	通过将图标 浮动 到右侧并应用 margin-left 来拉伸图标

自定义

我们添加了 CSS 自定义属性，使自定义更容易、更高效。定义您自己的以下属性值，以 覆盖和自定义 Font Awesome 的默认值。

CSS 自定义属性	详细信息	接受的值
--fa-border-color	设置边框颜色	任何有效的 CSS border-color 值
--fa-border-padding	设置图标周围的填充	任何有效的 CSS padding 值
--fa-border-radius	设置边框半径	任何有效的 CSS border-radius 值
--fa-border-style	设置边框样式	任何有效的 CSS border-style 值
--fa-border-width	设置边框宽度	任何有效的 CSS border-width 值
--fa-pull-margin	设置图标周围的边距	任何有效的 CSS margin 值

盖茨比相信绿灯，相信那一年年复一年地向我们退去的狂喜的未来。它当时逃避了我们，但这没关系——明天我们将跑得更快，伸展我们的手臂更远……在一个美好的早晨——所以我们奋力前行，船逆流而上，不断被拉回过去。

<i class="fa-solid fa-quote-left fa-2x fa-pull-left" style="--fa-pull-margin: 4em;"></i>
Gatsby believed in the green light, the orgastic future that year by year
recedes before us. It eluded us then, but that’s no matter — tomorrow we will
run faster, stretch our arms further... And one fine morning — So we beat on,
boats against the current, borne back ceaselessly into the past.

盖茨比相信绿灯，相信那一年年复一年地向我们退去的狂喜的未来。它当时逃避了我们，但这没关系——明天我们将跑得更快，伸展我们的手臂更远……在一个美好的早晨——所以我们奋力前行，船逆流而上，不断被拉回过去。

<i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border" style="--fa-border-color: inherit; --fa-border-padding: 0.5em; --fa-border-radius: 100%; --fa-border-style: dotted; --fa-border-width: 0.5em;"></i>
Gatsby believed in the green light, the orgastic future that year by year
recedes before us. It eluded us then, but that’s no matter — tomorrow we will
run faster, stretch our arms further... And one fine morning — So we beat on,
boats against the current, borne back ceaselessly into the past.