Question

我想做的是显示我的图标。我希望将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;
 }

Answer 1

您必须包括Font Awesome的CSS。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

为什么我的图标未显示CSS / HTML？

1 个答案: