چگونه آیکون را به مکان دلخواهمان اضافه کنیم؟
آموزشی جذاب از گروه فنی مهندسی زرین هوور
برای قرار دادن یک آیکون ، نام کلاس کلاس را به هر عنصر HTML اضافه کنید.
عناصر <i> و <span> به طور گسترده ای برای اضافه کردن آیکون، استفاده می شود.
تمام آیکونهای کتابخانه های زیر، آیکونهایی مقیاس پذیر هستند که می توانند با 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">
توجه: دانلود یا نصب لازم نیست!
|
<!DOCTYPE html> <i class=”fa fa-cloud”></i> </body> |
آیکونهای بوت استرپ
برای استفاده از glyphicons بوت استرپ، خط زیر را در داخل اضافه کنید: <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> |
آیکون های گوگل
برای استفاده از این آیکونها، خط زیر را در داخل اضافه کنید: <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> |
برخی از فونت های آیکون
| fa fa-address-book | | ||
| fa fa-address-book-o | | ||
| fa fa-address-card | | ||
| fa fa-address-card-o | | ||
| fa fa-adjust | | ||
| fa fa-adn | | ||
| fa fa-align-center | | ||
| fa fa-align-justify | | ||
| fa fa-align-left | | ||
| fa fa-align-right | | ||
| fa fa-amazon | | ||
| fa fa-ambulance | | ||
| fa fa-american-sign-language-interpreting | | ||
| fa fa-anchor | | ||
| fa fa-android | | ||
| fa fa-angellist | | ||
| fa fa-angle-double-down | | ||
| fa fa-angle-double-left | | ||
| fa fa-angle-double-right | | ||
| fa fa-angle-double-up | | ||
| fa fa-angle-down | | ||
| fa fa-angle-left | | ||
| fa fa-angle-right | | ||
| fa fa-angle-up | | ||
| fa fa-apple | | ||
| fa fa-archive | | ||
| fa fa-area-chart | | ||
| fa fa-arrow-circle-down | | ||
| fa fa-arrow-circle-left | | ||
| fa fa-arrow-circle-o-down | | ||
| fa fa-arrow-circle-o-left | | ||
| fa fa-arrow-circle-o-right | | ||
| fa fa-arrow-circle-o-up | | ||
| fa fa-arrow-circle-right | | ||
| fa fa-arrow-circle-up | | ||
| fa fa-arrow-down | | ||
| fa fa-arrow-left | | ||
| fa fa-arrow-right | | ||
| fa fa-arrow-up | | ||
| fa fa-arrows | | ||
| fa fa-arrows-alt | | ||
| fa fa-arrows-h | | ||
| fa fa-arrows-v | | ||
| fa fa-asl-interpreting | | ||
| fa fa-assistive-listening-systems | | ||
| fa fa-asterisk | | ||
| fa fa-at | | ||
| fa fa-audio-description | | ||
| fa fa-automobile | | ||
| fa fa-backward | | ||
| fa fa-balance-scale | | ||
| fa fa-ban | | ||
| fa fa-bandcamp | | ||
| fa fa-bank | | ||
| fa fa-bar-chart | | ||
| fa fa-bar-chart-o | | ||
| fa fa-barcode | | ||
| fa fa-bars | | ||
| fa fa-bath | | ||
| fa fa-bathtub | | ||
| fa fa-battery-0 | | ||
| fa fa-battery-1 | | ||
| fa fa-battery-2 | | ||
| fa fa-battery-3 | | ||
| fa fa-battery-4 | | ||
| fa fa-battery-empty | | ||
| fa fa-battery-full | | ||
| fa fa-battery-half | | ||
| fa fa-battery-quarter | | ||
| fa fa-battery-three-quarters | | ||
| fa fa-bed | | ||
| fa fa-beer | | ||
| fa fa-behance | | ||
| fa fa-behance-square | | ||
| fa fa-bell | | ||
| fa fa-bell-o | | ||
| fa fa-bell-slash | | ||
| fa fa-bell-slash-o | | ||
| fa fa-bicycle | | ||
| fa fa-binoculars | | ||
| fa fa-birthday-cake | | ||
| fa fa-bitbucket | | ||
| fa fa-bitbucket-square | | ||
| fa fa-bitcoin | | ||
| fa fa-black-tie | | ||
| fa fa-blind | | ||
| fa fa-bluetooth | | ||
| fa fa-bluetooth-b | | ||
| fa fa-bold | | ||
| fa fa-bolt | | ||
| fa fa-bomb | | ||
| fa fa-book | | ||
| fa fa-bookmark | | ||
| fa fa-bookmark-o | | ||
| fa fa-braille | | ||
| fa fa-briefcase | | ||
| fa fa-btc | | ||
| fa fa-bug | | ||
| fa fa-building | | ||
| fa fa-building-o | | ||
| fa fa-bullhorn | | ||
| fa fa-bullseye | | ||
| fa fa-bus | | ||
| fa fa-buysellads | | ||
| fa fa-cab | | ||
| fa fa-calculator | | ||
| fa fa-calendar | | ||
| fa fa-calendar-check-o | | ||
| fa fa-calendar-minus-o | | ||
| fa fa-calendar-o | | ||
| fa fa-calendar-plus-o | | ||
| fa fa-calendar-times-o | | ||
| fa fa-camera | | ||
| fa fa-camera-retro | | ||
| fa fa-car | | ||
| fa fa-caret-down | | ||
| fa fa-caret-left | | ||
| fa fa-caret-right | | ||
| fa fa-caret-square-o-down | | ||
| fa fa-caret-square-o-left | | ||
| fa fa-caret-square-o-right | | ||
| fa fa-caret-square-o-up | | ||
| fa fa-caret-up | | ||
| fa fa-cart-arrow-down | | ||
| fa fa-cart-plus | | ||
| fa fa-cc | | ||
| fa fa-cc-amex | | ||
| fa fa-cc-diners-club | | ||
| fa fa-cc-discover | | ||
| fa fa-cc-jcb | | ||
| fa fa-cc-mastercard | | ||
| fa fa-cc-paypal | | ||
| fa fa-cc-stripe | | ||
| fa fa-cc-visa | | ||
| fa fa-certificate | | ||
| fa fa-chain | | ||
| fa fa-chain-broken | | ||
| fa fa-check | | ||
| fa fa-check-circle | | ||
| fa fa-check-circle-o | | ||
| fa fa-check-square | | ||
| fa fa-check-square-o | | ||
| fa fa-chevron-circle-down | | ||
| fa fa-chevron-circle-left | | ||
| fa fa-chevron-circle-right | | ||
| fa fa-chevron-circle-up | | ||
| fa fa-chevron-down | | ||
| fa fa-chevron-left | | ||
| fa fa-chevron-right | | ||
| fa fa-chevron-up | | ||
| fa fa-child | | ||
| fa fa-chrome | | ||
| fa fa-circle | | ||
| fa fa-circle-o | | ||
| fa fa-circle-o-notch | | ||
| fa fa-circle-thin | | ||
| fa fa-clipboard | | ||
| fa fa-clock-o | | ||
| fa fa-clone | | ||
| fa fa-close | | ||
| fa fa-cloud | | ||
| fa fa-cloud-download | | ||
| fa fa-cloud-upload | | ||
| fa fa-cny | | ||
| fa fa-code | | ||
| fa fa-code-fork | | ||
| fa fa-codepen | | ||
| fa fa-codiepie | | ||
| fa fa-coffee | | ||
| fa fa-cog | | ||
| fa fa-cogs | | ||
| fa fa-columns | | ||
| fa fa-comment | | ||
| fa fa-comment-o | | ||
| fa fa-comments | | ||
| fa fa-comments-o | | ||
سینا سعیدی
دیدگاهتان را بنویسید
محدود کردن گوشی های شیائومی در ایران – موبایل های شیائومی قفل میشوند؟
چند روز پیش کاربری در کوبا که موبایل شیائومی داشت گزارش کرده بود که موبایل او به طرز عجیبی قفل شده است. از دیروز خبر قفل شدن موبایل های شیائومی در ایران هم گذاشته شده است. دیروز در سایت XDA...
نصب ابزارهای کالی لینوکس روی سایر توزیع های دبیان(اوبونتو،مینت و …)
آموزش اتصال قالب HTML به PHP
چرا گوگل بهترین موتور جست و جو جهان شده؟
