- Home
- Html
- طراحی سایت
- اضافه کردن آیکون به صفحه دلخواه در HTML
اضافه کردن آیکون به صفحه دلخواه در HTML
چگونه آیکون را به مکان دلخواهمان اضافه کنیم؟
آموزشی جذاب از گروه فنی مهندسی زرین هوور
برای قرار دادن یک آیکون ، نام کلاس کلاس را به هر عنصر 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 | | ||
سینا سعیدی
برچسب ها
دیدگاهتان را بنویسید لغو پاسخ
مطالب پر بازدید
رفع ارور ۵۱۳۳ در SQL Server
سلام عرض می کنم خدمت اعضای عزیز و کاربران سایت زرین هور امروز قصد دارم در این پست رفع ارور 5133 در پایگاه داده SQL Server را که بیشتر یکی از ارورهای ورژن 2012 این دیتابیس است آموزش بدم. با...