CSS Дүрс тэмдэг

Веб хуудсанд дүрс тэмдэг (icon) оруулах хамгийн хялбар арга бол Font Awesome эсвэл Google Material Icons зэрэг бэлэн сангуудыг холбох явдал юм.

Эдгээр дүрс тэмдгүүд нь фонт шиг ажилладаг тул CSS-ийн color болон font-size ашиглан өнгө, хэмжээг нь өөрчилж болно.

Ашиглахын тулд эхлээд icon сангийн CSS-ийг <head> дотор <link>-ээр холбож, дараа нь <i class="fa-solid fa-envelope"></i> шиг tag ашиглана.

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
.my-icon {
    color: #2563eb;
    font-size: 32px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<i class="fa-solid fa-envelope my-icon"></i>
<i class="fa-solid fa-heart my-icon" style="color:crimson;"></i>
</body>
</html>

Туршиж үзэх »