[英]Font-Awesome Not Showing
我不明白为什么我的 fa-fa 符号不会显示。 在此先感谢您的帮助!
这是我的 CodePen 的链接: https ://codepen.io/IDCoder/full/OWbXLw/
这是我的 HTML 代码:
**<!--Social media links -->
<div class="social-media-icon-footer">
<div id="contact">
<div class="contact">
<h3>Social Media Connections</h3>
<div>
<ul class="soc">
<li class="socbutton">
<a href="https://www.linkedin.com" target="blank"><i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
</li>
<li class="socbutton">
<a href="https://github.com" target="blank"><i class= "fa fa-github fa-fw"></i>GITHUB</a>
</li>
<li class="socbutton">
<a href="https://www.facebook.com" target="blank"><i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
</li>
<li class="socbutton">
<a href="https://www.freecodecamp.com" target="blank"><i class= "fa fa-fire fa-fw"></i>FREECODECAMP</a>
</li>
</ul>
</div>
</div>
</div>**
这是我的 CSS 代码:
.social-media-icon-footer{
width:500px;
background-color:white;
color: #0099ff;
height:80px;
border: 1px solid black;
border-radius: 5px;
text-align: center;
}
/**
.link-button-holder {
width: 50px;
height: 40px;
box-shadow: inset 0px 1px 0px 0px #ffffff;
border-radius: 4px;
background-color: #097BC0;
box-shadow: 0px 2px 4px gray;
display: block;
border:1px solid #094BC0;
}
**/
.link-button-holder > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-holder > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 12px;
font-family: cabinregular;
text-align: center;
}
div.contact {
padding: 0px;
margin-top:-20px;
/**background-color: black;**/
}
ul.soc {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
text-align: center;
width: 100%;
}
ul.soc li {
display: inline-block;
}
li.socbutton a {
background-color: #0099ff;
border: 1px solid white;
border-radius: 10px;
color: white;
text-decoration: none;
text-shadow: 2px 2px black;
font-size: 12px;
margin: 5px;
padding: 5px;
box-shadow: 7px 7px 5px black;
width: 300px;
}
这是我引用的 CodePen 的链接: https ://codepen.io/SHENKU360/pen/VedRbP
这是他的html代码:
<div id="contact">
<div class="contact">
<h3>Contact</h3>
<div>
<ul class="soc">
<li class="socbutton">
<a href=" https://www.linkedin.com/in/jason-conley-744b27111/" target="blank"><i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
</li>
<li class="socbutton">
<a href="https://github.com/shenku360/" target="blank"><i class= "fa fa-github fa-fw"></i>GITHUB</a>
</li>
<li class="socbutton">
<a href="https://www.facebook.com/jason.conley.9231712/" target="blank"><i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
</li>
<li class="socbutton">
<a href="https://www.freecodecamp.com/shenku360/" target="blank"><i class= "fa fa-fire fa-fw"></i>FREECODECAMP</a>
</li>
</ul>
</div>
</div>
这是CSS代码:
ul.soc {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
text-align: center;
width: 100%;
}
ul.soc li {
display: inline-block;
}
li.socbutton a {
background-color: gray;
border: 2px solid black;
border-radius: 10px;
color: white;
text-decoration: none;
text-shadow: 2px 2px black;
font-size: 24px;
margin: 20px;
padding: 20px;
box-shadow: 10px 10px 5px black;
width: 250px;
}
fa-fa 图标显示在他的页面上,但它们不会显示在我的页面上!
你添加了字体很棒的 css 吗? 我在你的 html 中没有看到它。
<link rel="stylesheet" href="https://cdnjs. cloudflare.com/ajax/libs/font-awesome/4.7.0/ css/font-awesome.min.css">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.