چگونه آیکون را به مکان دلخواهمان اضافه کنیم؟
آموزشی جذاب از گروه فنی مهندسی زرین هوور
برای قرار دادن یک آیکون ، نام کلاس کلاس را به هر عنصر 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 | | ||
