آیکون Glyphicons
Glyphicons عناصر طراحی آیکون های مختلف
Glyphicons
گلیف‌های موجود
شامل 260 علامت در قالب فونت از مجموعه Glyphicon Halflings است. Glyphicons Halflings معمولا به صورت رایگان در دسترس نیستند، اما خالق آنها برای Bootstrap به صورت رایگان در دسترس قرار داده است. به عنوان تشکر، از شما می‌خواهیم یک پیونده به سایتGlyphicons بدهید هر زمان که امکانش را داشتید.
- glyphicon glyphicon-asterisk
- glyphicon glyphicon-plus
- glyphicon glyphicon-euro
- glyphicon glyphicon-eur
- glyphicon glyphicon-minus
- glyphicon glyphicon-cloud
- glyphicon glyphicon-envelope
- glyphicon glyphicon-pencil
- glyphicon glyphicon-glass
- glyphicon glyphicon-music
- glyphicon glyphicon-search
- glyphicon glyphicon-heart
- glyphicon glyphicon-star
- glyphicon glyphicon-star-empty
- glyphicon glyphicon-user
- glyphicon glyphicon-film
- glyphicon glyphicon-th-large
- glyphicon glyphicon-th
- glyphicon glyphicon-th-list
- glyphicon glyphicon-ok
- glyphicon glyphicon-remove
- glyphicon glyphicon-zoom-in
- glyphicon glyphicon-zoom-out
- glyphicon glyphicon-off
- glyphicon glyphicon-signal
- glyphicon glyphicon-cog
- glyphicon glyphicon-trash
- glyphicon glyphicon-home
- glyphicon glyphicon-file
- glyphicon glyphicon-time
- glyphicon glyphicon-road
- glyphicon glyphicon-download-alt
- glyphicon glyphicon-download
- glyphicon glyphicon-upload
- glyphicon glyphicon-inbox
- glyphicon glyphicon-play-circle
- glyphicon glyphicon-repeat
- glyphicon glyphicon-refresh
- glyphicon glyphicon-list-alt
- glyphicon glyphicon-lock
- glyphicon glyphicon-flag
- glyphicon glyphicon-headphones
- glyphicon glyphicon-volume-off
- glyphicon glyphicon-volume-down
- glyphicon glyphicon-volume-up
- glyphicon glyphicon-qrcode
- glyphicon glyphicon-barcode
- glyphicon glyphicon-tag
- glyphicon glyphicon-tags
- glyphicon glyphicon-book
- glyphicon glyphicon-bookmark
- glyphicon glyphicon-print
- glyphicon glyphicon-camera
- glyphicon glyphicon-font
- glyphicon glyphicon-bold
- glyphicon glyphicon-italic
- glyphicon glyphicon-text-height
- glyphicon glyphicon-text-width
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- glyphicon glyphicon-list
- glyphicon glyphicon-indent-left
- glyphicon glyphicon-indent-right
- glyphicon glyphicon-facetime-video
- glyphicon glyphicon-picture
- glyphicon glyphicon-map-marker
- glyphicon glyphicon-adjust
- glyphicon glyphicon-tint
- glyphicon glyphicon-edit
- glyphicon glyphicon-share
- glyphicon glyphicon-check
- glyphicon glyphicon-move
- glyphicon glyphicon-step-backward
- glyphicon glyphicon-fast-backward
- glyphicon glyphicon-backward
- glyphicon glyphicon-play
- glyphicon glyphicon-pause
- glyphicon glyphicon-stop
- glyphicon glyphicon-forward
- glyphicon glyphicon-fast-forward
- glyphicon glyphicon-step-forward
- glyphicon glyphicon-eject
- glyphicon glyphicon-chevron-left
- glyphicon glyphicon-chevron-right
- glyphicon glyphicon-plus-sign
- glyphicon glyphicon-minus-sign
- glyphicon glyphicon-remove-sign
- glyphicon glyphicon-ok-sign
- glyphicon glyphicon-question-sign
- glyphicon glyphicon-info-sign
- glyphicon glyphicon-screenshot
- glyphicon glyphicon-remove-circle
- glyphicon glyphicon-ok-circle
- glyphicon glyphicon-ban-circle
- glyphicon glyphicon-arrow-left
- glyphicon glyphicon-arrow-right
- glyphicon glyphicon-arrow-up
- glyphicon glyphicon-arrow-down
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-resize-full
- glyphicon glyphicon-resize-small
- glyphicon glyphicon-exclamation-sign
- glyphicon glyphicon-gift
- glyphicon glyphicon-leaf
- glyphicon glyphicon-fire
- glyphicon glyphicon-eye-open
- glyphicon glyphicon-eye-close
- glyphicon glyphicon-warning-sign
- glyphicon glyphicon-plane
- glyphicon glyphicon-calendar
- glyphicon glyphicon-random
- glyphicon glyphicon-comment
- glyphicon glyphicon-magnet
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glyphicon glyphicon-shopping-cart
- glyphicon glyphicon-folder-close
- glyphicon glyphicon-folder-open
- glyphicon glyphicon-resize-vertical
- glyphicon glyphicon-resize-horizontal
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glyphicon glyphicon-bell
- glyphicon glyphicon-certificate
- glyphicon glyphicon-thumbs-up
- glyphicon glyphicon-thumbs-down
- glyphicon glyphicon-hand-right
- glyphicon glyphicon-hand-left
- glyphicon glyphicon-hand-up
- glyphicon glyphicon-hand-down
- glyphicon glyphicon-circle-arrow-right
- glyphicon glyphicon-circle-arrow-left
- glyphicon glyphicon-circle-arrow-up
- glyphicon glyphicon-circle-arrow-down
- glyphicon glyphicon-globe
- glyphicon glyphicon-wrench
- glyphicon glyphicon-tasks
- glyphicon glyphicon-filter
- glyphicon glyphicon-briefcase
- glyphicon glyphicon-fullscreen
- glyphicon glyphicon-dashboard
- glyphicon glyphicon-paperclip
- glyphicon glyphicon-heart-empty
- glyphicon glyphicon-link
- glyphicon glyphicon-phone
- glyphicon glyphicon-pushpin
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-sort
- glyphicon glyphicon-sort-by-alphabet
- glyphicon glyphicon-sort-by-alphabet-alt
- glyphicon glyphicon-sort-by-order
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-sort-by-attributes
- glyphicon glyphicon-sort-by-attributes-alt
- glyphicon glyphicon-unchecked
- glyphicon glyphicon-expand
- glyphicon glyphicon-collapse-down
- glyphicon glyphicon-collapse-up
- glyphicon glyphicon-log-in
- glyphicon glyphicon-flash
- glyphicon glyphicon-log-out
- glyphicon glyphicon-new-window
- glyphicon glyphicon-record
- glyphicon glyphicon-save
- glyphicon glyphicon-open
- glyphicon glyphicon-saved
- glyphicon glyphicon-import
- glyphicon glyphicon-export
- glyphicon glyphicon-send
- glyphicon glyphicon-floppy-disk
- glyphicon glyphicon-floppy-saved
- glyphicon glyphicon-floppy-remove
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-open
- glyphicon glyphicon-credit-card
- glyphicon glyphicon-transfer
- glyphicon glyphicon-cutlery
- glyphicon glyphicon-header
- glyphicon glyphicon-compressed
- glyphicon glyphicon-earphone
- glyphicon glyphicon-phone-alt
- glyphicon glyphicon-tower
- glyphicon glyphicon-stats
- glyphicon glyphicon-sd-video
- glyphicon glyphicon-hd-video
- glyphicon glyphicon-subtitles
- glyphicon glyphicon-sound-stereo
- glyphicon glyphicon-sound-dolby
- glyphicon glyphicon-sound-5-1
- glyphicon glyphicon-sound-6-1
- glyphicon glyphicon-sound-7-1
- glyphicon glyphicon-copyright-mark
- glyphicon glyphicon-registration-mark
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-cloud-upload
- glyphicon glyphicon-tree-conifer
- glyphicon glyphicon-tree-deciduous
- glyphicon glyphicon-cd
- glyphicon glyphicon-save-file
- glyphicon glyphicon-open-file
- glyphicon glyphicon-level-up
- glyphicon glyphicon-copy
- glyphicon glyphicon-paste
- glyphicon glyphicon-alert
- glyphicon glyphicon-equalizer
- glyphicon glyphicon-king
- glyphicon glyphicon-queen
- glyphicon glyphicon-pawn
- glyphicon glyphicon-bishop
- glyphicon glyphicon-knight
- glyphicon glyphicon-baby-formula
- glyphicon glyphicon-tent
- glyphicon glyphicon-blackboard
- glyphicon glyphicon-bed
- glyphicon glyphicon-apple
- glyphicon glyphicon-erase
- glyphicon glyphicon-hourglass
- glyphicon glyphicon-lamp
- glyphicon glyphicon-duplicate
- glyphicon glyphicon-piggy-bank
- glyphicon glyphicon-scissors
- glyphicon glyphicon-bitcoin
- glyphicon glyphicon-yen
- glyphicon glyphicon-ruble
- glyphicon glyphicon-scale
- glyphicon glyphicon-ice-lolly
- glyphicon glyphicon-ice-lolly-tasted
- glyphicon glyphicon-education
- glyphicon glyphicon-option-horizontal
- glyphicon glyphicon-option-vertical
- glyphicon glyphicon-menu-hamburger
- glyphicon glyphicon-modal-window
- glyphicon glyphicon-oil
- glyphicon glyphicon-grain
- glyphicon glyphicon-sunglasses
- glyphicon glyphicon-text-size
- glyphicon glyphicon-text-color
- glyphicon glyphicon-text-background
- glyphicon glyphicon-object-align-top
- glyphicon glyphicon-object-align-bottom
- glyphicon glyphicon-object-align-horizontal
- glyphicon glyphicon-object-align-left
- glyphicon glyphicon-object-align-vertical
- glyphicon glyphicon-object-align-right
- glyphicon glyphicon-triangle-right
- glyphicon glyphicon-triangle-left
- glyphicon glyphicon-triangle-bottom
- glyphicon glyphicon-triangle-top
- glyphicon glyphicon-console
- glyphicon glyphicon-superscript
- glyphicon glyphicon-subscript
- glyphicon glyphicon-menu-left
- glyphicon glyphicon-menu-right
- glyphicon glyphicon-menu-down
- glyphicon glyphicon-menu-up
چگونگی استفاده
به دلایل عملکرد، تمام آیکون ها نیاز به یک کلاس پایه و یک کلاس آیکون خاص دارند. که استفاده کنید، کد زیر را فقط در هر نقطه قرار دهید. اطمینان حاصل کنید که فاصله بین آیکون و متن برای پوشش مناسب را ایجاد کنید.
با اجزای دیگر مخلوط نکنید
کلاس های نماد نمی تواند به طور مستقیم با اجزای دیگر ترکیب شود. آنها نباید همراه با
کلاس های دیگر در همان عنصر استفاده شوند. در عوض، <span>
درونی دیگری اضافه کنید و کلاس نماد را به <span> بدهید.
فقط برای استفاده در عناصر خالی
کلاس آیکون ها فقط باید در عناصر حاوی محتوای متن و هیچ یک از عناصر دارای زیر مجموعه استفاده شود.
تغییر محل فونت آیکون
فوت آیکون های Bootstrap در محل ../fonts/
وجود دارد, که محل فونت ها در زمان کامپایل css ها می‌باشد. جابجایی و یا تغییر نام
هریک از این فونت ها باید CSS را به یکی از سه شکل زیر تغییر دهید:
- تغییر مقدار
@icon-font-pathو/یا@icon-font-nameمتغیر در فایل منبع LESS. - استفاده از گزینه URL نسبی که با استفاده از Less کامپایلر در دسترس است.
- تغییر آدرس
url()در فایل CSS کامپایل شده.
از بهترین گزینه که برای محیط کاری شما مناسب است استفاده نمایید.
آیکون‌ها دسترس پذیری
نسخه های مدرن از فناوری های کمک کننده محتوای CSS تولید شده و همچنین کاراکترهای
Unicode خاص را اعلام خواهند کرد. برای جلوگیری از خروج ناخواسته و گیج کننده در
خوانندگان روی صفحه (به خصوص وقتی که آیکون ها صرفا برای دکوراسیون استفاده می شوند)،
ما آنها را با ویژگی aria-hidden = "true"پنهان میکنیم.
اگر از آیکون برای انتقال معنای (به جای فقط به عنوان یک عنصر تزئینی) استفاده کنید،
اطمینان حاصل کنید که این معنا نیز به فن آوری های کمک رسانی منتقل می شود - مثلا شامل
محتوای اضافی است که بصری با کلاس .sr-only پنهان شده است.
اگر شما کنترل هایی را با هیچ متن دیگر (مانند <button> که شامل یک
آیکون است) ایجاد می کنید، همیشه باید مواد جایگزین را برای شناسایی هدف کنترل، به طوری
که آن را برای کاربران فناوری های کمک کننده معنا داشته باشد. در این مورد، شما می
توانید ویژگی های aria-labelرا بر روی کنترل خود اضافه کنید.
کپی
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>مثال‌ها
از آنها در دکمه ها، گروه های دکمه برای نوار ابزار، ناوبری یا ورودی های فرم استفاده شده استفاده کنید.
Copy
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> ستاره
</button>
یک آیکون در هشدار استفاده می شود که نشان می دهد این یک پیام خطا
است؛ با افزودن .sr-only متن برای انتقال این اشاره به کاربران فن
آوری های کمک.
اخطار: یک ایمیل آدرس صحیح وارد نمایید.
کپی
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">خطا:</span>
یک ایمیل آدرس صحیح وارد نمایید.
</div>