问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Font Awesome 不起作用，图标显示为正方形

社区维基
1
新手上路，请多包涵

所以我正在尝试制作营销页面的原型，我正在使用 Bootstrap 和新的 Font Awesome 文件。问题是，当我尝试使用图标时，页面上呈现的所有内容都是一个大正方形。

以下是我如何将文件包含在头部：

 <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

这是我尝试使用图标的示例：

 <i class="icon-camera-retro"></i>

但是所有这些都呈现在一个大广场上。有谁知道会发生什么？

原文由 Connor Black 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译csshtmlbootstrapfont-awesome
阅读 670
2 个回答
得票最新
社区维基
1
✓ 已被采纳

根据 文档（第 3 步），您需要修改提供的 CSS 文件以指向您网站上的字体位置。

原文由 mayhewr 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

您必须有 2 个类， fa 类和标识所需图标的类 fa-twitter ， fa-search 等……

 <!-- Wrong -->
<i class="fa-search"></i>

<!-- Correct -->
<i class="fa fa-search"></i>

引导程序 5 更新

注意：“fa 前缀在版本 5 中已被弃用。新的默认值为品牌的 fas solid 样式和 fab 样式。” – Terje Solem

原文由 Nabil Kadimi 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题