English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Questo capitolo spiega le icone di carattere (Glyphicons) e ne esplora l'uso attraverso alcuni esempi. Bootstrap include oltre 200 tipi di tratti di font. Prima di tutto, capiamo cosa sono le icone di carattere.
Le icone di caratteri sono un tipo di font utilizzato nei progetti web. Anche se,Glyphicons Halflings è necessaria una licenza commerciale, ma puoi utilizzare questi iconogrammi gratuitamente basandoti sul Bootstrap del progetto.
Per esprimere gratitudine agli autori delle icone, si prega di aggiungere il link al sito web GLYPHICONS quando si utilizzano.
Abbiamo già Installazione dell'ambiente La sezione ha scaricato la versione Bootstrap 3.x e ha compreso la sua struttura di directory. In fonts All'interno della cartella puoi trovare le icone di caratteri, che includono i seguenti file:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Le regole CSS correlate sono scritte in dist La cartella css all'interno della cartella bootstrap.css e bootstrap-min.css sul file.
Clicca qui per vedere l'elenco delle icone di caratteri disponibili.
Le seguenti regole CSS compongono la classe glyphicon.
I risultati sono come segue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Icona del menu di navigazione</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-left: 50px;
}
</style>
<![if lt IE 9]>
<script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Commuta la navigazione</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Nome del Progetto</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Negozio</a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Supporto</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<!-- jQuery (i plugin di Bootstrap devono essere inclusi) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Contiene tutti i plugin compilati -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>Testa e vedi <</>>Abbiamo visto come utilizzare le icone dei caratteri, ora vediamo come personalizzare le icone dei caratteri.
Inizieremo con l'esempio sopra riportato e personalizzeremo l'icona modificando la dimensione del carattere, il colore e l'ombra di testo.
Ecco il codice di partenza:
<button type="button"> <span></span> Utente </button>
L'effetto è come mostrato di seguito:
Aumentando o riducendo la dimensione del carattere dell'icona, puoi fare sembrare l'icona più grande o più piccola.
<button type="button" style="font-size: 60px"> <span></span> Utente </button>
<button type="button" style="color: rgb(212, 106, 64);"> <span></span> Utente </button>
<button type="button" style="text-shadow: black 5px 3px 3px;"> <span></span> Utente </button>
Clicca qui per personalizzare le icone dei caratteri >>
| Icona | Nome della classe | esempio |
|---|---|---|
| glyphicon glyphicon-asterisk | Prova Ora | |
| glyphicon glyphicon-plus | Prova Ora | |
| glyphicon glyphicon-minus | Prova Ora | |
| glyphicon glyphicon-euro | Prova Ora | |
| glyphicon glyphicon-cloud | Prova Ora | |
| glyphicon glyphicon-envelope | Prova Ora | |
| glyphicon glyphicon-pencil | Prova Ora | |
| glyphicon glyphicon-glass | Prova Ora | |
| glyphicon glyphicon-music | Prova Ora | |
| glyphicon glyphicon-search | Prova Ora | |
| glyphicon glyphicon-heart | Prova Ora | |
| glyphicon glyphicon-star | Prova Ora | |
| glyphicon glyphicon-star-empty | Prova Ora | |
| glyphicon glyphicon-user | Prova Ora | |
| glyphicon glyphicon-film | Prova Ora | |
| glyphicon glyphicon-th-large | Prova Ora | |
| glyphicon glyphicon-th | Prova Ora | |
| glyphicon glyphicon-th-list | Prova Ora | |
| glyphicon glyphicon-ok | Prova Ora | |
| glyphicon glyphicon-remove | Prova Ora | |
| glyphicon glyphicon-zoom-in | Prova Ora | |
| glyphicon glyphicon-zoom-out | Prova Ora | |
| glyphicon glyphicon-off | Prova Ora | |
| glyphicon glyphicon-signal | Prova Ora | |
| glyphicon glyphicon-cog | Prova Ora | |
| glyphicon glyphicon-trash | Prova Ora | |
| glyphicon glyphicon-home | Prova Ora | |
| glyphicon glyphicon-file | Prova Ora | |
| glyphicon glyphicon-time | Prova Ora | |
| glyphicon glyphicon-road | Prova Ora | |
| glyphicon glyphicon-download-alt | Prova Ora | |
| glyphicon glyphicon-download | Prova Ora | |
| glyphicon glyphicon-upload | Prova Ora | |
| glyphicon glyphicon-inbox | Prova Ora | |
| glyphicon glyphicon-play-circle | Prova Ora | |
| glyphicon glyphicon-repeat | Prova Ora | |
| glyphicon glyphicon-refresh | Prova Ora | |
| glyphicon glyphicon-list-alt | Prova Ora | |
| glyphicon glyphicon-lock | Prova Ora | |
| glyphicon glyphicon-flag | Prova Ora | |
| glyphicon glyphicon-headphones | Prova Ora | |
| glyphicon glyphicon-volume-off | Prova Ora | |
| glyphicon glyphicon-volume-down | Prova Ora | |
| glyphicon glyphicon-volume-up | Prova Ora | |
| glyphicon glyphicon-qrcode | Prova Ora | |
| glyphicon glyphicon-barcode | Prova Ora | |
| glyphicon glyphicon-tag | Prova Ora | |
| glyphicon glyphicon-tags | Prova Ora | |
| glyphicon glyphicon-book | Prova Ora | |
| glyphicon glyphicon-bookmark | Prova Ora | |
| glyphicon glyphicon-print | Prova Ora | |
| glyphicon glyphicon-camera | Prova Ora | |
| glyphicon glyphicon-font | Prova Ora | |
| glyphicon glyphicon-bold | Prova Ora | |
| glyphicon glyphicon-italic | Prova Ora | |
| glyphicon glyphicon-text-height | Prova Ora | |
| glyphicon glyphicon-text-width | Prova Ora | |
| glyphicon glyphicon-align-left | Prova Ora | |
| glyphicon glyphicon-align-center | Prova Ora | |
| glyphicon glyphicon-align-right | Prova Ora | |
| glyphicon glyphicon-align-justify | Prova Ora | |
| glyphicon glyphicon-list | Prova Ora | |
| glyphicon glyphicon-indent-left | Prova Ora | |
| glyphicon glyphicon-indent-right | Prova Ora | |
| glyphicon glyphicon-facetime-video | Prova Ora | |
| glyphicon glyphicon-picture | Prova Ora | |
| glyphicon glyphicon-map-marker | Prova Ora | |
| glyphicon glyphicon-adjust | Prova Ora | |
| glyphicon glyphicon-tint | Prova Ora | |
| glyphicon glyphicon-edit | Prova Ora | |
| glyphicon glyphicon-share | Prova Ora | |
| glyphicon glyphicon-check | Prova Ora | |
| glyphicon glyphicon-move | Prova Ora | |
| glyphicon glyphicon-step-backward | Prova Ora | |
| glyphicon glyphicon-fast-backward | Prova Ora | |
| glyphicon glyphicon-backward | Prova Ora | |
| glyphicon glyphicon-play | Prova Ora | |
| glyphicon glyphicon-pause | Prova Ora | |
| glyphicon glyphicon-stop | Prova Ora | |
| glyphicon glyphicon-forward | Prova Ora | |
| glyphicon glyphicon-fast-forward | Prova Ora | |
| glyphicon glyphicon-step-forward | Prova Ora | |
| glyphicon glyphicon-eject | Prova Ora | |
| glyphicon glyphicon-chevron-left | Prova Ora | |
| glyphicon glyphicon-chevron-right | Prova Ora | |
| glyphicon glyphicon-plus-sign | Prova Ora | |
| glyphicon glyphicon-minus-sign | Prova Ora | |
| glyphicon glyphicon-remove-sign | Prova Ora | |
| glyphicon glyphicon-ok-sign | Prova Ora | |
| glyphicon glyphicon-question-sign | Prova Ora | |
| glyphicon glyphicon-info-sign | Prova Ora | |
| glyphicon glyphicon-screenshot | Prova Ora | |
| glyphicon glyphicon-remove-circle | Prova Ora | |
| glyphicon glyphicon-ok-circle | Prova Ora | |
| glyphicon glyphicon-ban-circle | Prova Ora | |
| glyphicon glyphicon-arrow-left | Prova Ora | |
| glyphicon glyphicon-arrow-right | Prova Ora | |
| glyphicon glyphicon-arrow-up | Prova Ora | |
| glyphicon glyphicon-arrow-down | Prova Ora | |
| glyphicon glyphicon-share-alt | Prova Ora | |
| glyphicon glyphicon-resize-full | Prova Ora | |
| glyphicon glyphicon-resize-small | Prova Ora | |
| glyphicon glyphicon-exclamation-sign | Prova Ora | |
| glyphicon glyphicon-gift | Prova Ora | |
| glyphicon glyphicon-leaf | Prova Ora | |
| glyphicon glyphicon-fire | Prova Ora | |
| glyphicon glyphicon-eye-open | Prova Ora | |
| glyphicon glyphicon-eye-close | Prova Ora | |
| glyphicon glyphicon-warning-sign | Prova Ora | |
| glyphicon glyphicon-plane | Prova Ora | |
| glyphicon glyphicon-calendar | Prova Ora | |
| glyphicon glyphicon-random | Prova Ora | |
| glyphicon glyphicon-comment | Prova Ora | |
| glyphicon glyphicon-magnet | Prova Ora | |
| glyphicon glyphicon-chevron-up | Prova Ora | |
| glyphicon glyphicon-chevron-down | Prova Ora | |
| glyphicon glyphicon-retweet | Prova Ora | |
| glyphicon glyphicon-shopping-cart | Prova Ora | |
| glyphicon glyphicon-folder-close | Prova Ora | |
| glyphicon glyphicon-folder-open | Prova Ora | |
| glyphicon glyphicon-resize-vertical | Prova Ora | |
| glyphicon glyphicon-resize-horizontal | Prova Ora | |
| glyphicon glyphicon-hdd | Prova Ora | |
| glyphicon glyphicon-bullhorn | Prova Ora | |
| glyphicon glyphicon-bell | Prova Ora | |
| glyphicon glyphicon-certificate | Prova Ora | |
| glyphicon glyphicon-thumbs-up | Prova Ora | |
| glyphicon glyphicon-thumbs-down | Prova Ora | |
| glyphicon glyphicon-hand-right | Prova Ora | |
| glyphicon glyphicon-hand-left | Prova Ora | |
| glyphicon glyphicon-hand-up | Prova Ora | |
| glyphicon glyphicon-hand-down | Prova Ora | |
| glyphicon glyphicon-circle-arrow-right | Prova Ora | |
| glyphicon glyphicon-circle-arrow-left | Prova Ora | |
| glyphicon glyphicon-circle-arrow-up | Prova Ora | |
| glyphicon glyphicon-circle-arrow-down | Prova Ora | |
| glyphicon glyphicon-globe | Prova Ora | |
| glyphicon glyphicon-wrench | Prova Ora | |
| glyphicon glyphicon-tasks | Prova Ora | |
| glyphicon glyphicon-filter | Prova Ora | |
| glyphicon glyphicon-briefcase | Prova Ora | |
| glyphicon glyphicon-fullscreen | Prova Ora | |
| glyphicon glyphicon-dashboard | Prova Ora | |
| glyphicon glyphicon-paperclip | Prova Ora | |
| glyphicon glyphicon-heart-empty | Prova Ora | |
| glyphicon glyphicon-link | Prova Ora | |
| glyphicon glyphicon-phone | Prova Ora | |
| glyphicon glyphicon-pushpin | Prova Ora | |
| glyphicon glyphicon-usd | Prova Ora | |
| glyphicon glyphicon-gbp | Prova Ora | |
| glyphicon glyphicon-sort | Prova Ora | |
| glyphicon glyphicon-sort-by-alphabet | Prova Ora | |
| glyphicon glyphicon-sort-by-alphabet-alt | Prova Ora | |
| glyphicon glyphicon-sort-by-order | Prova Ora | |
| glyphicon glyphicon-sort-by-order-alt | Prova Ora | |
| glyphicon glyphicon-sort-by-attributes | Prova Ora | |
| glyphicon glyphicon-sort-by-attributes-alt | Prova Ora | |
| glyphicon glyphicon-unchecked | Prova Ora | |
| glyphicon glyphicon-expand | Prova Ora | |
| glyphicon glyphicon-collapse-down | Prova Ora | |
| glyphicon glyphicon-collapse-up | Prova Ora | |
| glyphicon glyphicon-log-in | Prova Ora | |
| glyphicon glyphicon-flash | Prova Ora | |
| glyphicon glyphicon-log-out | Prova Ora | |
| glyphicon glyphicon-new-window | Prova Ora | |
| glyphicon glyphicon-record | Prova Ora | |
| glyphicon glyphicon-save | Prova Ora | |
| glyphicon glyphicon-open | Prova Ora | |
| glyphicon glyphicon-saved | Prova Ora | |
| glyphicon glyphicon-import | Prova Ora | |
| glyphicon glyphicon-export | Prova Ora | |
| glyphicon glyphicon-send | Prova Ora | |
| glyphicon glyphicon-floppy-disk | Prova Ora | |
| glyphicon glyphicon-floppy-saved | Prova Ora | |
| glyphicon glyphicon-floppy-remove | Prova Ora | |
| glyphicon glyphicon-floppy-save | Prova Ora | |
| glyphicon glyphicon-floppy-open | Prova Ora | |
| glyphicon glyphicon-credit-card | Prova Ora | |
| glyphicon glyphicon-transfer | Prova Ora | |
| glyphicon glyphicon-cutlery | Prova Ora | |
| glyphicon glyphicon-header | Prova Ora | |
| glyphicon glyphicon-compressed | Prova Ora | |
| glyphicon glyphicon-earphone | Prova Ora | |
| glyphicon glyphicon-phone-alt | Prova Ora | |
| glyphicon glyphicon-tower | Prova Ora | |
| glyphicon glyphicon-stats | Prova Ora | |
| glyphicon glyphicon-sd-video | Prova Ora | |
| glyphicon glyphicon-hd-video | Prova Ora | |
| glyphicon glyphicon-subtitles | Prova Ora | |
| glyphicon glyphicon-sound-stereo | Prova Ora | |
| glyphicon glyphicon-sound-dolby | Prova Ora | |
| glyphicon glyphicon-sound-5-1 | Prova Ora | |
| glyphicon glyphicon-sound-6-1 | Prova Ora | |
| glyphicon glyphicon-sound-7-1 | Prova Ora | |
| glyphicon glyphicon-copyright-mark | Prova Ora | |
| glyphicon glyphicon-registration-mark | Prova Ora | |
| glyphicon glyphicon-cloud-download | Prova Ora | |
| glyphicon glyphicon-cloud-upload | Prova Ora | |
| glyphicon glyphicon-tree-conifer | Prova Ora | |
| glyphicon glyphicon-tree-deciduous | Prova Ora |