2 سال پیش
1707

اضافه کردن آیکون به صفحه دلخواه در 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>
<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>

 

آیکونهای بوت استرپ

برای استفاده از 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

دیدگاهتان را بنویسید

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

مطالب پر بازدید

چ
چند برنامه کاربردی ایفون،ایفون،اپلیکیشن ایفون،اپلیکیشن،برنامه های کاربردی،ایفوندار ها،IOS،برنامه ی ایفون،فتوشاپ،اب و هوا،ادیت،رمز عبور،پسورد

چند برنامه کاربردی ایفون

چند برنامه کاربردی ایفون که کمک های به سزایی به ما میکند. امروزه زندگی ما بسیار وابسته به گوشی ها شده و نه ننها حجم زیادی از امورات جاری و روزمره ی ما که بخش زیادی از احساسات و عواطف...

XML

قابلیت ساخت نقشه سایت XML به نسخه‌ی جدید وردپرس افزوده خواهد شد!

قابلیت های جدید فتوشاپ 2020 و نحوه کار کردن با آن ها،قابلیت های جدید،

قابلیت های جدید فتوشاپ ۲۰۲۰ و نحوه کار کردن با آن ها

جست‌وجو با کاراکترهای جایگزین در WORD،جست جو در word،کارکترهای جایگزینی در ورد،

جست‌وجو با کاراکترهای جایگزین در WORD

آموزش غیرفعال کردن تصحیح خودکار در کیبورد اندروید و آیفون،غیر فعال سازی اندروید و ایفون،

آموزش غیرفعال کردن تصحیح خودکار در کیبورد اندروید و آیفون