Question

我一直试图添加三个图标，大概6个小时，没有任何作品可以有人请求帮助:(

希望图标显示在“性能”，“技术”和“设计”之上。另外，我想在三个<p>内的div标签中添加引号图标。还想更改图标的颜色以匹配具有相同红色色调的hr标记。

这是我的HTML

<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>

<body>
<div id="menu wrapper" class="red">
    <div class="left"></div>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
        <li class="login"><a class="login" href="#">Log In</a></li>
    </ul>
</div>
<div class="header">
    <img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
        <hr />
</div>
<div class="content">
    <div class="container">
        <div class="icon1">
        <a href="#"><i class="fa fa-rocket fa-5x"></i></a>
        <h2><a href="#">Performance</a></h2>
        <hr class="ptd" />
        <p>Best in class when it comes to raw power!</p>
        </div>
        <div class="icon2">
        <a href="#"><i class="fa fa-power-off fa-5x"></i></a>
        <h2><a href="#">Technology</a></h2>
        <hr class="ptd" />
        <p>Oringinal Innovations pushing the boundaries of modern technology</p>
        </div>
        <div class="icon3">
        <a href=""></a><i class="fa fa-laptop fa-5x"></i></a>
        <h2><a href="#">Design</a></h2>
        <hr class="ptd" />
        <p>Designed with you in mind</p>
        </div>
    </div>
</div>
<div class="footer">
</div>
</body>
</html>

这是我的CSS

body {
background-image: url(black-Linen.png);
}

/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;   
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;

}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;

}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}

Answer 1

我认为它实际上工作正常，我可以在JS小提琴中看到图标。

问题可能是您的CSS文件链接吗？ href中是否应该有空格？

<link type="text/css" rel="Stylesheet" href="NavBar Example.css">

http://jsfiddle.net/Delorian/1x6u553h/

Answer 2

首先仔细检查您的标记。你有两个ID＆＃34; menu＆＃34; +＆＃34;包装＆＃34;和一个选择器＆＃34;＃menu_wrapper＆＃34;。我认为你应该只为动作保留ID，并添加类来添加样式。

您的加价：

<div id="menu wrapper" class="red">
    ...
</div>

正确标记：

<div id="menu" class="wrapper red">
    ...
</div>

Answer 3

您在引导CDN的链接上缺少协议http：//。尝试将其添加到链接，看看它是否有效：

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

Font Awesome不显示图标或在框内显示字母

3 个答案: