CSS icons

HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS icons</title>
https://kit.fontawesome.com/a076d05399.js
<link rel=»stylesheet» href=»css/style.css»>
</head>
<body>
<i class=»fas fa-cloud»></i>
<i class=»fas fa-heart»></i>
<i class=»fas fa-car»></i>
<i class=»fas fa-file»></i>
<i class=»fas fa-bars»></i>

<i class=»fas fa-cloud» id=»icon1″></i>
<i class=»fas fa-smile» id=»icon2″></i>
<i class=»fas fa-save» id=»icon3″></i>
<i class=»fas fa fa-microchip» id=»icon4″></i>
<hr>
<i class=»fas fa fa-bath» id=»icon5″></i>
<i class=»fas fa fa-battery-full» id=»icon6″></i>
<i class=»fas fa fa-camera» id=»icon7″></i>
</body>
</html>


CSS

#icon1{
font-size:24px;
}
#icon2{
font-size:36px;color:yellow;
}
#icon3{
font-size:48px;color:chartreuse;
}
#icon4{
font-size:60px;color:gray;
}
#icon5{
font-size:60px;color:lightblue;
}
#icon6{
font-size:60px;color:deepskyblue;
}
#icon7{
font-size:60px;color:darkgray;
}

5

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s