文章/答案/技术大牛

发布

社区首页 >问答首页 >图标不显示

问图标不显示
EN

Stack Overflow用户

提问于 2019-03-26 15:21:36

回答 1查看 341关注 0票数 2

我正在建立一个简单的网页。文本显示正确，但图标未显示。该图标来自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;
}

图标应可见

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-26 15:42:22

通过它。它将为您工作，因为在您的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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55351705

复制

相似问题

问图标不显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图标不显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图标不显示
EN