Иконки Pure.CSS
Иконки в наши дни стали очень яркими. Они помогают сделать сайт более привлекательным и привлекательным. Пакеты значков из различных источников предоставляют пользователю огромное разнообразие вариантов выбора из различных вариантов конкретного значка, подходящего для внешнего вида веб-сайта. В Интернете есть множество библиотек иконок, которыми можно пользоваться бесплатно или за определенную сумму денег.
Чистый CSS поддерживает следующие популярные библиотеки значков, их можно использовать бесплатно:
- Font Awesome Иконки
- Значки материалов Google
- Иконки Bootstrap
Ниже приведены
CDN paths
пакеты значков, которые вы можете использовать для использования значков на своем веб-сайте.
Просто добавьте эти пути CDN на свою веб-страницу, и вы сможете использовать значки из огромной библиотеки.
Примечание:
просто помните, что вам нужно знать имя класса значка, чтобы добавить его на свой веб-сайт, потому что каждый значок имеет определенный класс.
Вы должны поместить имя класса значка в тег <i>.
См. Пример ниже, чтобы понять, как использовать значки с тегом <i>.
CDN Путь
- Font Awesome: < link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
- Начальный этап: < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css >
- Материалы Google: < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" >
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Icons </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<style>
.xsmall {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 110%;
}
.xlarge {
font-size: 150%;
}
div {
margin: 15px;
}
</style>
<body>
<h2><center>Icons</center></h2>
<hr>
<div>
<h3>Font Awesome Icons</h3>
<i class="fa fa-cloud xsmall"></i>
<i class="fa fa-cloud small"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud large"></i>
<i class="fa fa-cloud xlarge"></i>
<h3>Google Material Design Icons</h3>
<i class="material-icons xsmall">cloud</i>
<i class="material-icons small">cloud</i>
<i class="material-icons large">cloud</i>
<i class="material-icons xlarge">cloud</i>
<i class="material-icons">cloud</i>
<i class="material-icons">cloud</i>
<h3>Bootstrap Icons</h3>
<i class="glyphicon glyphicon-cloud xsmall"></i>
<i class="glyphicon glyphicon-cloud small"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud large"></i>
<i class="glyphicon glyphicon-cloud xlarge"></i>
</div>
<div>
<button class="pure-button">
<i class="fab fa-google-plus-g fa-lg"></i> Google </button>
<a class="pure-button" href="#">
<i class="fab fa-facebook-square fa-lg"></i> Facebook </a>
<button class="pure-button">
<i class="fab fa-instagram fa-lg"></i> Instagram </button>
<a class="pure-button" href="#">
<i class="fab fa-youtube fa-lg"></i> Youtube </a>
<button class="pure-button">
<i class="fab fa-twitter fa-lg"></i> Twitter </button>
</div>
</body>
</html>