Html CSS社交图标不可见

当我尝试添加社交图标时，它们显示如下：

HTML:

Idk这是怎么发生的，我做了一个新的页脚，但它仍然具有与上面按钮相同的效果。我试图修复它，但它只会使它更糟，任何帮助将不胜感激：）

---

编辑：很抱歉我的代码太乱了

链接显示为蓝色矩形的原因是因为您说过所有链接都应该有蓝色背景和白色“文本”：

如果不希望对页脚中的内容进行这种处理，请使这些选择器更加具体，可能会将其更改为

.text a

（“类为

text

的元素中的所有链接”）

---

对于未显示的图标本身：开发者控制台（F12键）中可能有错误，提供了线索。例如，我不希望

标记具有

href=“stylesheet”

；这可能需要删除。

您的CDN没有晶圆厂图标。请尝试改用此CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">

或

从下载启动的工具包并在本地安装。他们也有相应的文件

* {
    margin: 0;
    padding: 0;
}

.parallax {
    background-image: url("#");
    min-height: 1000px;
    /* Efekat na stranici */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Dodatni efekti i slike za bolji izgled stranice :) */

.rectangle {
    height: 200px;
    width: 1920px;
    background-color: #555;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #fff;
    font-family: Century Gothic;
}

.container {
    position: relative;
    width: 50%;
}

.containerdesno {
    position: relative;
    width: 50%;
    left: 1000px;
    top: -1427px;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
}

.container:hover .overlay {
    opacity: 1;
}

.containerdesno:hover .overlay {
    opacity: 1;
}

.text {
    color: white;
    font-size: 20px;
    font-family: Century Gothic;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

*,
*:before,
*:after {
    box-sizing: border-box
}

a {
    display: inline-flex
}

a {
    background-color: #00ccff;
    color: white;
    padding: 1em 1.5em;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover {
    background-color: #555;
}

a:active {
    background-color: black;
}

.footer {
    background: #303036;
    color: #d3d3d3;
    height: 500px;
    position: relative;
    font-family: "Century Gothic";
}

.footer .footer-bottom {
    background: #343a40;
    color: #686868;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;
    font-family: "Century Gothic";
}

.footer .footer-content {
    border: 1px solid red;
    height: 450px;
    display: flex;
}

.footer .footer-content .footer-section {
    flex: 1;
    padding: 25px;
    border: 1px solid white;
}

a {
    display: inline-flex
}

a {
    background-color: #00ccff;
    color: white;
    /* ... */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">