css 字体真棒显示框而不是图标

bqujaahr 于 2023-02-10 发布在其他

关注(0)|答案(5)|浏览(158)

我已经导入了所有的字体真棒css到我的网站使用以下链接代码：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
 <link href="content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="content/css/theme.min.css" rel="stylesheet" />
<link href="content/css/WDWStyles.css" rel="stylesheet" />

然后添加图标使用：

<p>Find me at:</p>
<a class="btn btn-primary"><span class="fa fa-twitter"></span> Twitter</a> 
<a class="btn btn-primary"><span class="fa fa-github"></span> Github</a>     
<a class="btn btn-primary"><span class="fa fa-linkedin"></span> Linked in</a>

我的自定义CSS是：

@font-face {
    font-family: 'headline_onehplhs';
    src: url('fonts/HEADOH__-webfont.eot');
    src: url('fonts/HEADOH__-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/HEADOH__-webfont.woff2') format('woff2'),
         url('fonts/HEADOH__-webfont.woff') format('woff'),
         url('fonts/HEADOH__-webfont.ttf') format('truetype'),
         url('fonts/HEADOH__-webfont.svg#headline_onehplhs') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  background-image: url('../images/background.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.heading {
    background-color:#FFF;
    font-family: 'headline_onehplhs';
    font-size:3.5em;
    margin-left:50px;
    margin-top:50px;
    padding:20px;
    color:#000;
}

.heading span, .main span {
    background-color:#FFF;
    font-family: 'headline_onehplhs';
    color:#999;
    font-size:0.5em;
    display:block;
}

.main span {
    font-size:1.75em;
}

.main {
    background-color:#FFF;
    margin-left:50px;
    margin-top:25px;
    padding:20px;
    text-align:justify;
}

我的目录如下：
css〉字体真棒〉[字体真棒文件夹]
我使用的容器的类名是“main”
但是图标仍然显示为方形框-我错过了什么吗？

css

来源：https://stackoverflow.com/questions/29331137/font-awesome-showing-box-instead-of-icons

5条答案

按热度按时间

njthzxwz1#

尝试使用而不是
官方文件上：
启动并运行之后，您可以使用标记将Font Awesome图标放置在任何位置。
它还说：
你可以使用CSS前缀fa和图标的名字把Font Awesome图标放在任何地方。Font Awesome被设计成与内联元素一起使用（为了简洁起见，我们喜欢使用标签，但是使用在语义上更正确）。
虽然听起来使用也是可以接受的，但在某些情况下它并不能正确工作，所以继续使用是一个更安全的计划。

赞(0）回复(0）举报 2023-02-10

23c0lvtd2#

请使用以下命令：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
如果这解决了您的问题，那么您要么没有将字体上传到正确的目录，要么引用它们的方式不正确。
下面是一个测试，展示了使用font awesome所需的最少代码：

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

赞(0）回复(0）举报 2023-02-10

fafcakar3#

没有人提到字体文件夹与字体的关系。想一想为什么你必须把../放在背景图像的前面，让它知道img不包含在CSS文件夹中。检查font-awesome.css文件，看看它在哪里引用字体。

赞(0）回复(0）举报 2023-02-10

7gcisfzg4#

像这样？
HTML链接

<link href='content/css/font-awesome/css/font-awesome.css?family=font+awesome' rel='stylesheet' type='text/css'>

中央支助系统

fa{
   font-family: 'font awesome';
  }

来源：类似使用www.example.comhttp://www.google.com/fonts#QuickUsePlace:quickUse

赞(0）回复(0）举报 2023-02-10

erhoui1w5#

在AspNetCore（.net 7）中，我遇到了显示一个框而不是fontawesome图标的问题。我正在使用NPM吞下包并复制到wwwroot/css/fontawesome。在添加正确的链接到_Hosts.cshtml后，一切看起来都很好。

<link href="/css/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/css/fontawesome/css/solid.css" rel="stylesheet" />

在开发模式下，我注意到webfont文件上有404，经过进一步研究，我发现mime类型没有正确配置，在program.cs中添加以下内容，问题就解决了：

app.UseHttpsRedirection(); //Existing

// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".ttf"] = "font/ttf";
provider.Mappings[".woff"] = "font/woff";
provider.Mappings[".woff2"] = "font/woff2";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

app.UseRouting(); //Existing

赞(0）回复(0）举报 2023-02-10

我来回答

css 字体真棒显示框而不是图标

5条答案

相关问题

热门标签

最新问答