时间戳

首页 > 解决方案 > 为什么我的图标没有显示 CSS/Html？

html - 为什么我的图标没有显示 CSS/Html？

问题描述

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

标签： htmlcss

解决方案

您必须包括 Font Awesome 的 css。

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

推荐阅读