آیکون ها در 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>
خودتان امتحان کنید

 

منتشر شده در ۷ شهریور ۱۳۹۶ حمید رضا ملکی ۷۳۱ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده