ionic-framework
Ionicones
Buscar..
Observaciones
En el desarrollo web moderno, es una práctica común usar fuentes para mostrar iconos. Dado que las fuentes son vectores, son independientes de la resolución y se pueden colorear fácilmente a través de CSS, solo para mencionar algunas ventajas en comparación con las imágenes de mapa de bits, etc. Ionicons fue creado por el mismo equipo con el que se creó Ionic Framework y puede usarse en cualquier proyecto desde Son 100% gratuitos y de código abierto. MIT con licencia.
Los ionicons se pueden usar solos o con componentes CSS de Ionics cuando tienen ciertos estilos de acuerdo con los elementos principales.
La página de inicio y la lista de los iconos se pueden encontrar aquí: http://ionicons.com/
Uso básico
Los íconos de fuentes generalmente se colocan dentro de una etiqueta <i> . Ionic tiene estilos css predeterminados para los iconos para un uso fácil. El ejemplo más básico de uso:
<i class="icon ion-home"></i>
Uso extendido
Ionic tiene algunos componentes CSS donde puedes usar Ionicons como predeterminado que tiene un estilo preestablecido. La clase de range en el elemento <div> aplicará el estilo correcto tanto a la entrada como a los íconos dentro de ella. Aquí hay un ejemplo de un control deslizante de rango.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Otro ejemplo de uso de Ionicon en pestañas iónicas que creará una pestaña como menú. Las clases tabs-striped tabs-color-assertive definen el estilo de las pestañas en sí. Los iconos se usan con etiquetas <i> simples y obtienen su estilo posicional de las clases aplicadas a los divs principales.
<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>