ionic-framework
Ionicons
Recherche…
Remarques
Dans le développement Web moderne, il est courant d'utiliser des polices pour afficher des icônes. Les polices étant des vecteurs, elles sont indépendantes de la résolution et peuvent être facilement colorées via CSS, pour ne citer que quelques avantages par rapport aux images bitmap, etc. Les ioniques ont été créés par la même équipe que Ionic Framework ils sont 100% gratuits et open source. MIT Licensed.
Les ioniques peuvent être utilisés seuls ou avec des composants CSS Ionics quand ils ont certains styles en fonction des éléments parents.
La page d'accueil et la liste des icônes peuvent être trouvées ici: http://ionicons.com/
Utilisation de base
Les icônes de police sont généralement placées dans une <i> . Ionic a des styles CSS par défaut pour les icônes pour une utilisation facile. L'exemple le plus fondamental d'utilisation:
<i class="icon ion-home"></i>
Utilisation étendue
Ionic possède des composants CSS dans lesquels vous pouvez utiliser les ioniques par défaut avec un style prédéfini. La classe d' range dans l'élément <div> appliquera un style correct à la fois à l'entrée et aux icônes qu'elle contient. Voici un exemple de curseur de plage.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Un autre exemple d'utilisation d'Ionicon dans les onglets ioniques créera un menu similaire à un onglet. Les tabs-striped tabs-color-assertive classes tabs-striped tabs-color-assertive définissent le style des onglets eux-mêmes. Les icônes sont utilisées avec de simples balises <i> et elles obtiennent leur style de position à partir des classes appliquées aux divs parents.
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-b"></i>
Settings
</a>
</div>