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

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>

نتیجه:

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.