如何在 Jade 中的文本旁边应用 font-awesome 而不会弄乱我的 CSS？

Question

我的理解是，在使用 Jade 时，字体超棒的图标需要位于 a 标签内。但是，当我这样做时，我想与超链接关联的文本会丢失 CSS 中的格式。下面的示例图片显示了我正在谈论的示例。我还包括我正在使用的 Jade 代码。在照片中，您可以看到插入超赞字体图标后“All Ships”文本的格式不一致。我们将不胜感激。谢谢。

nav#mainNav Main Menu
        .menu
            a(href="/")
                i.fa.fa-ship(aria-hidden='true')  All Ships
            br
            br
            a(href='/addreview') Add Review
            br
            br
            a(href='/topships') Top Rated Ships
            br
            br
            a(href='/bestdining') Best Dining
            br
            br
            a(href='/worstships') Lowest Rated Ships
            br
            br
            a(href='/recentreviews') Most Recent Reviews
            br
            br

Answer 1

您的 Pug 代码正在使用 font-awesome 类编译 <i> 元素内的文本“All Ships”，这可能会覆盖您之前设置的文本样式。

您的代码：

a(href="/")
  i.fa.fa-ship(aria-hidden='true')  All Ships

编译为：

<a href="/"><i class="fa fa-ship" aria-hidden="true"> All Ships</i></a>

根据需要将您的代码修改为以下内容，将把“All Ships”文本作为该图标的同级文本。

a(href="/")
  i.fa.fa-ship(aria-hidden='true')
  | All Ships

编译为：

<a href="/"><i class="fa fa-ship" aria-hidden=""></i> All Ships</a>

如何在 Jade 中的文本旁边应用 font-awesome 而不会弄乱我的 CSS？

How do I apply font-awesome alongside text in Jade without messing up my CSS?

font-awesome

pug