img标签未正确放置

debugcn 发表于 Dev

基比

我的问题是这样的：https：//jsfiddle.net/a4uxteqc/3/

<style>
a.button {
    color: white;
    padding: 10px;
    font-size: 50px;
    text-decoration: none;
    text-align: center;
    height: 50px;
    width: 50px;
    border-radius: 15px;
    margin: 5px;
}

#btnTwitch {
    background-color: #6441a5;
}

#btnYoutube {
    background-color: #b2071d;
}

#btnInsta {
    background: radial-gradient(circle at 0% 90%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

#btnTwitter {
    background-color: #26a7de;
}

#btnFacebook {
    background-color: #39569c;
}

#btnDiscord {
    background-color: #7289DA;
    align-content: center;
    color: white;
    padding: 10px;
    font-size: 50px;
    text-decoration: none;
    text-align: center;
    height: 50px;
    width: 50px;
    border-radius: 15px;
    margin: 5px;
    cursor: pointer;
}
</style>
<script src="https://use.fontawesome.com/83f84e31ea.js"></script>
<body>    
        <a class="button fa fa-twitch" id="btnTwitch" href="https://www.twitch.tv/kirbbytv"></a>
        <a class="button fa fa-youtube-play" id="btnYoutube" href="https://www.youtube.com/channel/UCPDHhUwsQHnmwyfDU87M4zw"></a>
        <a class="button fa fa-instagram" id="btnInsta" href="https://www.instagram.com/kirbbytv/"></a>
        <a class="button fa fa-twitter" id="btnTwitter" href="https://twitter.com/kirbbyTV"></a>
        <a class="button fa fa-facebook-square" id="btnFacebook" href="https://www.facebook.com/kirbbytv"></a>
        <img id="btnDiscord" src="https://www.kindpng.com/picc/m/108-1083707_logo-discord-png-download-red-discord-logo-transparent.png" alt="Discord Logo" onclick="openDiscord()">    
</body>

首先，我尝试将包含为<img>带有<a>，但将背景矩形设为70x76，而FontAwesome矩形设为70x70。现在的<img>位置比所有位置都高<a>，我找不到原因。

谁能告诉我如何使最后一个“按钮”的位置和大小与前五个“按钮”的大小相同，或者如何通过封闭<a>使其与其他5个“按钮”的大小相同

马克·伯恩斯

使用Font Awesome的更新版本，并确保所有版本都一致。例如v5.14。

但是，您将需要检查图标容器的宽度。但是，使用Font Awesome Discord图标可以看起来更好。

  body {
        background-color: grey;
    }
    
svg.button {
        color: white;
        padding: 10px;
        font-size: 50px;
        text-decoration: none;
        text-align: center;
        height: 50px;
        width: 50px;
        border-radius: 15px;
        margin: 5px;
    }
    
    #discordLogo {
        height: 50px;
        width: 50px;
    }
    
    #btnTwitch {
        background-color: #6441a5;
    }
    
    #btnYoutube {
        background-color: #b2071d;
    }
    
    #btnInsta {
        background: radial-gradient(circle at 0% 90%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }
    
    #btnTwitter {
        background-color: #26a7de;
    }
    
    #btnFacebook {
        background-color: #39569c;
    }
    
        #btnDiscord {
        background-color: #7289DA;
        align-content: center;
        color: white;
        padding: 10px;
        font-size: 50px;
        text-decoration: none;
        text-align: center;
        height: 50px;
        width: 50px;
        border-radius: 15px;
        margin: 5px;
        cursor: pointer;
    }

<script src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<body>    
        <a class="button fab fa-twitch" id="btnTwitch" href="https://www.twitch.tv/kirbbytv"></a>
        <a class="button fab fa-youtube" id="btnYoutube" href="https://www.youtube.com/channel/UCPDHhUwsQHnmwyfDU87M4zw"></a>
        <a class="button fab fa-instagram" id="btnInsta" href="https://www.instagram.com/kirbbytv/"></a>
        <a class="button fab fa-twitter" id="btnTwitter" href="https://twitter.com/kirbbyTV"></a>
        <a class="button fab fa-facebook-square" id="btnFacebook" href="https://www.facebook.com/kirbbytv"></a>
        <a class="button fab fa-discord" id="btnDiscord" href="https://www.facebook.com/kirbbytv"></a>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。