我遵循了本教程:https://www.youtube.com/watch?v=Fc48IYYaEHw&index=4&list=PL0qaQSYB_0TD-7tNkfMnJ0DCFJVjBNF8G除了我将图标添加到页眉中并删除了页脚之外。
他们表现得很好。然后由于某种原因他们消失了。当我在 Atom 中预览代码时它们会出现,但当我在网站上提交和查看时它们不会出现。
This image shows how it shows in preview
这是我的导航栏代码:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Alexandra Bowen</a>
</div>
<div class="navbar-collapse collapse">
<div class="navbar-text pull-left">
<a href="https://twitter.com/AlexandraABowen"><i class="fa fa-twitter fa-1x"></i></a>
<a href="https://www.linkedin.com/in/alexandrabrower"><i class="fa fa-linkedin fa-1x"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Experience <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li><a href="experience.html">Experience</a></li>
<li><a href="talkswriting.html">Talks and Writing</a></li>
<li class="divider"></li>
</ul>
</li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
这是我的 CSS:
fontawesome.navbar-text > a {
color: #18BC9C;
text-decoration: none;
}
body {
padding-top: 70px;
padding-bottom: 100px;
}
我的 Bootstrap 代码:
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Rasa' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
最佳答案
尝试使用 https 从不同的 CDN 中提取 FA:
在您的 <!-- Bootstrap -->
中部分而不是
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
尝试使用
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
关于twitter-bootstrap - FontAwesome 图标未显示。使用 Bootstrap、Atom 和 GitHub 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38862114/