صفحه اصلی / آموزش 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 Outline

  CSS Outline (طرح کلی CSS) یک outline یا طرح کلی، خطی است که در …

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

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