字体真棒图标没有出现

Posted 2023-03-06

【中文标题】字体真棒图标没有出现

【英文标题】：Font-Awesome Icon not appearing

【发布时间】：2018-05-18 01:28:26

【问题描述】：

我同时使用 Bootstrap4 和 Font-Awesome。 我知道 Bootstrap4 工作正常，因为我从 Bootstrap4 使用的所有类都工作正常。但是，这是我第一次使用 Font-Awesome，我真的不知道为什么图标没有出现。 我在脑海中使用这个来获取 FontAwesome。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

然后我用。

<div class="container text-center">
    <br /><br /><br />
    <i class="icon-search"></i> <input id="search" type="text" placeholder="Search for a City" />
</div>

我使用了这个文档：http://fontawesome.io/3.2.1/icon/search/ 此外，我的网络选项卡显示 font-awesome 已被获取，状态为 200。

【问题讨论】：

您正在包括 fontawesome 4.7.0 并使用来自 3.2.1 的文档。

你的语法应该是这样的：<i class="fa fa-search"></i>

【参考方案1】：

使用3.2.1version 的 CDN 时，一切正常。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="container text-center">
    <br /><br /><br />
    <i class="icon-search"></i> <input id="search" type="text" placeholder="Search for a City" />
</div>

如果你想使用4.7.0，你必须这样做：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <div class="container text-center">
        <br /><br /><br />
        <i class="fa fa-search"></i> <input id="search" type="text" placeholder="Search for a City" />
    </div>

来自v4的文档：http://fontawesome.io/icon/search/