Иконки на Pure CSS - httpdoc.ru

Иконки 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>

Выход

Pure.CSS Icons

Иконки


Font Awesome Иконки

Иконки Google Material Design

облако облако облако облако облако облако

Иконки Bootstrap

Facebook YouTube