٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش نمادهای CSS

با استفاده از کتابخانه نمادها ، نمادها به راحتی می توانند به صفحه HTML شما اضافه شوند. نحوه افزودن نمادها ساده ترین راه برای افزودن یک نماد به صفحه HTML خود ، داشتن یک کتابخانه آیکون ، مانند Font Awesome…

محمد یوسفی

11 جولای 2021

با استفاده از کتابخانه نمادها ، نمادها به راحتی می توانند به صفحه HTML شما اضافه شوند.

نحوه افزودن نمادها

ساده ترین راه برای افزودن یک نماد به صفحه HTML خود ، داشتن یک کتابخانه آیکون ، مانند Font Awesome است.

نام کلاس آیکون مشخص شده را به هر عنصر HTML درون خطی (مانند <i>یا <span>) اضافه کنید.

تمام نمادهای موجود در کتابخانه های آیکون زیر ، بردارهای مقیاس پذیر هستند که می توانند با CSS (اندازه ، رنگ ، سایه و غیره) سفارشی شوند


نمادهای بسیار جذاب قلم

برای استفاده از نمادهای Font Awesome ، به fontawesome.com بروید ، وارد سیستم شوید و کدی را برای اضافه کردن در <head>بخش صفحه HTML خود دریافت کنید:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

توجه: بدون بارگیری یا نصب لازم نیست!

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</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>

</body>
</html>

نتیجه


نمادهای راه انداز

برای استفاده از glyphicons Bootstrap ، خط زیر را در <head>بخش صفحه HTML خود اضافه کنید:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

توجه: بدون بارگیری یا نصب لازم نیست!

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

نتیجه:


نمادهای Google

برای استفاده از نمادهای Google ، خط زیر را در <head>بخش صفحه HTML خود اضافه کنید:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

توجه: بدون بارگیری یا نصب لازم نیست!

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

نتیجه:

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها