Question

当我尝试添加社交图标时，它们显示如下： Blue Squares (effect I have on the buttons above shows up instead of social icons)

HTML：

<html>
<head>
    <link href="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="parallax"></div>
    <h1>
    </h1>
    </div>
    <h1 style="text-align: center;"><span style="font-family: Century Gothic;">Najnovije od Logitech-a</span> </h1>
    <div class="container">
        <img src="#" class="image">
        <div class="overlay">
            <div class="text">Logitech G Pro X Superlight, Cijena: 239.99 KM <br> <a href="#" style="Margin:auto">Bosanski</a>
                <a href="#" style="Margin:auto">Engleski</a>
                </br>
            </div>
        </div>
    </div>
    <div class="container">
        <img src="#" class="image">
        <div class="overlay">
            <div class="text">Logitech G733 LightSpeed, Cijena: 329.99 KM <br> <a href="#" style="Margin:auto">Bosanski</a>
                <a href="#" style="Margin:auto">Engleski</a>
                </br>
            </div>
        </div>
    </div>
    <div class="containerdesno">
        <img src="#" class="image">
        <div class="overlay">
            <div class="text">Logitech G333, Cijena: 79.99 KM <br> <a href="#" style="Margin:auto">Bosanski</a>
                <a href="#" style="Margin:auto">Engleski</a>
                </br>
            </div>
        </div>
    </div>
    <div class="containerdesno">
        <img src="#" class="image">
        <div class="overlay">
            <div class="text">Logitech G Pro Keyboard K/DA Edition, Cijena: 209.99 KM <br> <a href="#" style="Margin:auto">Bosanski</a>
                <a href="#" style="Margin:auto">Engleski</a>
                </br>
            </div>
        </div>
    </div>
    <div class = "footer">
        <div class= "footer-content">
            <div class = "footer-section about">
                <p>
                    Ovlastena Logitech prodavnica u BiH. 
                </p>
                <div class= "contact">
                    <span><i class="fas fa-phone"></i> &nbsp; +41 (0)21 863 55 11
                    <span><i class="fas fa-envelope"></i> &nbsp; support@logitech.ba
                </div>
                <div class= "socials">
                    <a href= "#"><i class = "fab fa-facebook"></i></a>
                    <a href= "#"><i class = "fab fa-instagram"></i></a>
                    <a href= "#"><i class = "fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
        <div class= "footer-bottom">
            Designed by Anes Tarić
        </div>
    </div>
</body>

CSS：

* {
    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;
}

我不知道这是怎么发生的，我做了一个新的页脚，但它仍然具有与上面按钮相同的效果。我尝试修复它，但它只会让它变得更糟，任何帮助将不胜感激:)

编辑：抱歉我乱七八糟的代码

Answer 1

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

a {
    display: inline-flex
}

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

如果您不想对页脚中的内容进行这种处理，请使这些选择器更具体，也许将它们更改为 .text a（“类为 text 的元素内的所有链接”）。

对于未显示的图标本身：开发者控制台（F12 键）中可能存在提供线索的错误。例如，我不希望 <link> 标签有 href="stylesheet";这可能需要删除。

Answer 2

您的 CDN 没有 fab 图标。尝试改用此 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">

或

从 https://fontawesome.com/ 下载已启动的套件并在本地安装。他们也有相应的文档。

CSS 社交图标不可见

2 个答案: