Иконки не отображаются - PullRequest
2 голосов
/ 26 марта 2019

Я создаю простую веб-страницу. Текст отображается правильно, но значок не отображается. Значок из рамок иониконов.

В этом файле 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;
}

Значок должен быть виден

1 Ответ

1 голос
/ 26 марта 2019

Пройдите через это. это будет работать для вас, потому что в вашем 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...