Question

我正在构建一个简单的网页。文本显示正确，但图标未显示。图标来自ionicons框架。

我检查了此css文件中的ionicons.min.css路径和图标名称

我的html文件：

<!--DOCHtml5-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>webpage</title>
    <link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet"> 
    <link href="icons/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class = "name">
        Name
        <ul class = "social-icons">
            <li><i class="ion-arrow-right-a"></i></li>
        </ul>
    </div>   
</body>
</html>

我的css文件：

*{
    margin:0;
    padding:0;
    font-family: 'Euphoria Script', cursive;
    font-size: 100px;    
}

body{
    height:100vh;
    margin: 0;
    padding: 0;
    background-color: #ef6758;
}

.name{
    position:absolute;
    top:35%;
    left:31%;
    font-family: 'Montez', cursive;
    color: #4be214;
}

.social-icons li{
    list-style: none;
}

图标应该可见

Answer 1

通过它。它会为您工作，因为在CSS中找不到字体系列文件

*{
    margin:0;
    padding:0;
    font-family: 'Euphoria Script', cursive;
    font-size: 100px;    
}

body{
    height:100vh;
    margin: 0;
    padding: 0;
    background-color: #ef6758;
}

.name{
    position:absolute;
    top:35%;
    left:31%;
    font-family: 'Montez', cursive;
    color: #4be214;
}

.social-icons li{
    list-style: none;
}

<!--DOCHtml5-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>webpage</title>
    <link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet"> 
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class = "name">
        Name
        <ul class = "social-icons">
            <li><i class="ion-arrow-right-a"></i></li>
        </ul>
    </div>   
</body>
</html>

图标不显示

1 个答案: