خانه / آموزش CSS / بخش چهاردهم-آموزش آیکون ها در CSS
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۲۳ بهمن ۱۳۹۷ تعداد بازدید : 15 بازدید بدون دیدگاه

بخش چهاردهم-آموزش آیکون ها در 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”>

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

مثال:

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

 

 

گام قبلی >< گام بعدی

 

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

لینک کوتاه این مطلب: https://tiktheme.com/?p=15526


کانال تلگرام تیک تم

مطلب پیشنهادی

خصوصیات display در CSS

بخش هجدهم- آموزش خصوصیت display در CSS یا CSS Layout

  CSS Layout – خصوصیت display در CSS خصوصیت display در CSS مهمترین ویژگی CSS …

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

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