اضافه کردن آیکون به صفحه دلخواه در HTML

0 39


آیکون در 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

شما همچنین ممکن است مانند بیشتر از نویسنده

ترک یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.