我想要做的就是展示我的图标。我希望facebook图标,youtube和instagram图标出现在页面上。
这是我试图让图标显示的代码行。
<ul>
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube-square"></i></a></li>
</ul>
这是我的整个页面。
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>RESUME</title>
<link type="text/css" rel="stylesheet" href="Resume.css">
</head>
<body>
<div class="box">
<img src="pic.jpg" alt="" class="box-img">
<h1> Last name </h1>
<h5> Bachelors In Informatics</h5>
<p>
This is the Greatest Resume of all time. Now don’t be so fast as to flip this over and toss it aside or better yet file it away with all the other
boring old Resumes you must read through out the long workday. Stick around and see what I have to say,
you won’t regret it one bit;As the title stated this will be one of a kind it will blow your mind once you are finished here.
So sit back relax pull out some of those snacks you got hidden away and enjoy the ride to your next best employee of the year!
</P>
<ul>
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube-square"></i></a></li>
</ul>
</div>
</body>
</html>
这是我正在使用的css。我不确定是css还是HTML的问题导致它没有出现。
body{
margin: 0;
padding: 0;
background: url(pic.jpg) no-repeat;
background-size: cover;
}
.box{
width:450px;
background: rgba(0,0,0,0.4);
padding: 40px;
text-align: center;
margin: auto;
margin-top: 5%;
color: white;
font-famimly; 'century Gothic' ,sans-serif;
}
.box-img{
border-radius: 50%;
width: 200px;
height: 200px;
}
.box h1{
font-size: 40px;
letter-spacing 4px;
font-weight: 100px;
}
.box h5{
font-family: 25px;
letter-spacing: 3px;
font-weight 100;
}
.box p {
text-align:justify;
}
ul {
margin: 0;
padding: 0;
}
.box li{
display: inline-block;
margin; 6px;
list-style: none;
}
.box li a {
color: white;
text-decoration: none;
font-size: 60px;
transistion: all ease-in-out 250ms;
}
.box li a:hover{
color: #b969b6;
}
发布于 2018-06-27 08:03:37
你必须包括Font Awesome的css。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
https://stackoverflow.com/questions/51052829
复制相似问题