CSS Дүрс, Тэмдэг /Icon/
dd
dd
Дүрс, Тэмдгийг хэрхэн нэмэх вэ?
- HTML хуудсанд icon буюу дүрс нэмэх энгийн арга бол Font Awesome санг ашиглана.
- Inline HTML элементийн class-т тухайн дүрсийн /icon/-н нэрийг зааж өгнө. /<i> эсвэл <span>/
- Бүх дүрсийн хэмжээг өөрчлөх, өнгө өгөх, сүүдэр өгөх зэрэг боломжтой.
Font Awesome Icons
Font Awesome Icons-г ашиглахын тулд fontawesome.com сайтад бүртгүүлж код авна. Авсан кодоо өөрийн HTML хуудасны <head> section буюу хэсэгт нэмж өгнө. <script src="https://kit.fontawesome.com/tanii_code.js"></script>
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-clock" style="font-size:40px;color:#3f9ce8"></i>
<i class="fas fa-clock" style="font-size:60px;color:#3f9ce8"></i>
<i class="fas fa-clock" style="font-size:80px;color:#3f9ce8"></i>
<i class="far fa-clock" style="font-size:40px;color:#3f9ce8"></i>
<i class="far fa-clock" style="font-size:60px;color:#3f9ce8"></i>
<i class="far fa-clock" style="font-size:80px;color:#3f9ce8"></i>
</body>
</html>
Bootstrap Icons
Bootstrap glyphicons-ийг ашиглахын тулд HTML хуудасны <head> хэсэгт доорох мөрийг нэмж өгнө.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">/script>
</head>
<body>
<i class="glyphicon glyphicon-cloud" style="font-size:40px;color:#3f9ce8"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:#3f9ce8"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:80px;color:#3f9ce8"></i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:40px;color:#3f9ce8"></i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:60px;color:#3f9ce8"></i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:80px;color:#3f9ce8"></i>
</body>
</html>
Google Icons
Google icons-ийг ашиглахын тулд HTML хуудасны <head> хэсэгт доорох мөрийг нэмнэ үү. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"">
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons" style="font-size:40px";>cloud</i>
<i class="material-icons" style="font-size:60px">favorite</i>
<i class="material-icons" style="font-size:80px">attachment</i>
<i class="material-icons" style="font-size:60px">computer</i>
<i class="material-icons" style="font-size:40px">traffic</i>
</body>
</html>
Сэтгэгдэлүүд
