صفحه اصلی / آموزش CSS / آیکون ها در CSS/ آیکون ها در html /بخش چهاردهم-آموزش آیکون ها در CSS

آیکون ها در CSS/ آیکون ها در html /بخش چهاردهم-آموزش آیکون ها در CSS

 

 

بررسی و آموزش آیکون ها در CSS
آموزش آیکون ها در CSS

اضافه کردن آیکون ها در CSS

 

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

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

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

آیکون های Font Awesome

از جمله آیکون ها در CSS ، آیکون های Font Awesome، هستند که برای استفاده از آنها باید خط زیر را در قسمت <head> صفحه HTML خود اضافه کنید:

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” integrity=”sha384 lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ” crossorigin=”anonymous”>

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

مثال:

بعد از اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

آیکون های Bootstrap 

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

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

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

مثال:

بعد از اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

 

 

آیکون های گوگل

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

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

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

مثال:

بعد از اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

 

 

 

بخش چهاردهم-آموزش آیکون ها در CSS

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *