|
|
تاریخ انتشار:۱۳:۵۱ ۱۳۹۹/۴/۱۴
آموزش CSS - جلسه چهاردهم
آیکون ها در CSS
آیکون ها امروزه جزئی جدا ناپذیر از وب سایت ها هستند و به ندرت سایتی را میتوان پیدا کرد که از آیکون ها در آن استفاده نشده باشد. در این فصل به نحوه ی استفاده از آیکون ها خواهیم پرداخت.
چگونه آیکون ها را به صفحه وب اضافه کنیم
ساده ترین روش برای افزودن یک آیکون به یک صفحه 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/ >
منبع:learnsource
|
|
|
|