میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

آیکون icon در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش آیکون icon در CSS با من همراه باشید.

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

 

icon


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

ساده ترین روش برای افزودن یک آیکون به یک صفحه 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>

 


امیدواریم آموزش آیکون icon در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssicon cssicon در cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssآیکون ها در cssآیکون های cssاستفاده از ایکون در cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟