字体真棒图标不会出现

问题描述 投票:0回答:2

我正在使用font awesome在我的网站上添加社交媒体按钮。我遵循规则,但图标不显示这是我的网站的负责人

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>oktavianusm</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
<link href="fontawesome-free-5.3.1-web/css/fontawesome.min.css" rel="stylesheet" type="text/css">

这就是我在html中管理它的方式

<div class="social-media">
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-linkedin-square"></i>
        <i class="fab fa-google-plus-square"></i>
    </div>

这就是我在浏览器中测试代码时发生的情况

this is what happenwhen I do the inspect element and point the cursor on the code

html font-awesome
2个回答
1
投票

刚刚查看了Font Awesome网站:https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

这是正确的样式表链接:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
crossorigin="anonymous">

在我的网站上看着使用这些。


0
投票

我有同样的问题。该链接间歇性地未加载到DOM中。它没有明显的原因,所以为了解决它,我添加了以下代码来手动添加链接。 jQuery用于向头部添加链接。如果它已经存在,那么你只是得到一个副本。

<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font awesome force load as was not loading -->
<script>
    $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
</script>

我知道这不是一个漂亮的解决方案,但确实有效。我应该提到这个链接适用于4.7您需要将其更改为您想要的任何版本。

© www.soinside.com 2019 - 2024. All rights reserved.