آیکون ها در CSS

آیکون ها امروزه جزئی جدا ناپذیر از وب سایت ها هستند و به ندرت سایتی را میتوان پیدا کرد که از آیکون ها در آن استفاده نشده باشد. در این فصل به نحوه ی استفاده از آیکون ها خواهیم پرداخت.


cloud
car
hand

چگونه آیکون ها را به صفحه وب اضافه کنیم

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

سپس نام کلاس آیکون مورد نظر را به هر عنصر inline در HTML اضافه کنید (مانند <i> یا <span>)

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


آیکون های کتاب خانه Font Awesome

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

دقت داشته باشید با اضافه کردن کد بالا هیچ دانلود و نصبی در این مورد نیاز نیست. این روش افزودن cdn نام دارد و از کتابخانه ای که در سروری خارجی قرار گرفته استفاده میکند. شما محدود به این روش نیستید و میتوانید کتابخانه Font Awesome را از سایت رسمی آن دانلود کرده و آن را مانند دیگر کتاب خانه ها به پروژه ی خود اضافه کنید.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>
خودتان امتحان کنید

آیکون های 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

برای استفاده از آیکون های گوگل، خط زیر را به قسمت <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>
خودتان امتحان کنید

 

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

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

سلام.من تعدادی آیکن با فرمت svg دانلود کردم چطور میتونم اونا رو وارد پروژه کنم.با تشکر
حمید رضا ملکی - ۲ سال قبل

سلام.. باید از تگ های مربوطه به اون ها در پروژه استفاه کنین

trever filips - ۲ سال قبل
سلام برای ایکون باید ادرس عکس رو بزاریم؟
حمید رضا ملکی - ۲ سال قبل

سلام.. اگر از Font Awesome استفاده کنید نیاز نیست

محمد تقی شمسی - ۲ سال قبل
سلام لود کردن ایکون به سایت چه مزیت های دارد
حمید رضا ملکی - ۲ سال قبل

سلام.. خوب مسلما از نظر ظاهری سایت شما بهتر به نظر میرسد

کاربر مهمان - ۴ سال قبل
با درود جالب و قشنگه آموزشها سپاس

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.