Css icons
Note: Remember to leave a space after the closing tag of icon element (i.e. after </i> tag), when using the icons along with the strings of text such as inside buttons or navigation links, to ensure that there is proper spacing between the icon and text.
You can also use external icon libraries in Bootstrap. One of the most popular and highly compatible external icon library for Bootstrap is Font Awesome. It provides over 675 icons which are available in SVG, PNG, as well as in web font format for better usability and scalability.
Lista de iconos Html
Un «Fav Icon» o favicon es un icono marcable que tiene un diseño cuadrado que se asemeja a su sitio web. Estos iconos web pueden ser de 16×16 hasta 64×64. La mayoría de los diseñadores web incluyen una imagen favicon.ico cuando diseñan un sitio.
La principal consideración es mantener su icono simple y claro en un tamaño tan pequeño. La mayoría de las interfaces de los navegadores (la barra de herramientas superior que contiene los botones del navegador) pueden mostrar 256 colores, pero es mejor utilizar los 16 colores de Windows.
Si quieres crear diferentes iconos para diferentes páginas, simplemente llámalos de otra manera que no sea favicon.ico pero conservando el sufijo .ico. Enlaza con ellos en tus páginas de la misma manera que en el caso anterior, sólo cambiando la ubicación del href para los diferentes iconos.
Clase html
Skip to contentHome / Add an icon before or after a link with CSSCSS has a matching syntax for selectors which makes it possible to match the filename extension at the end of an href. This makes it easy to add an icon which relates to the link before or after the text part of the link.Matching the filename extensionThis works in all modern browsers. It does not work in Internet Explorer 6 but that is becoming less relevent these days. If the browser does not support the matching syntax then it simply won’t render the image or any of the associated styling so it won’t break anything.For example, to match all zip files add the following to your CSS file:a[href$=’.zip’] {
}The $= makes the match at the end of the href part of the <a> tag.Adding an image icon to the linkSimply add the necessary styling to add a background image aligned either to the left or right of the link, and then enough padding to the right or left respectively so the text doesn’t go over the top of the image.The doc/docx and xls/xlsx examples add the icon to the right of the text in the link and the pdf and zip examples to the left. Make sure the padding is at least the width of the image.In the example presented below the images are 16px x 16px so a padding of 18px allows for a couple of pixels space between the text and the icon.a[href$=’.doc’], a[href$=’.docx’] {
Código html de los iconos
Usar <link rel=»icon»> y una imagen ICO para añadir el favicon para el sitio web en HTMLPodemos usar la imagen ICO para añadir el favicon en un sitio web en HTML con fines de compatibilidad con versiones anteriores. Casi todos los navegadores modernos soportan la imagen PNG para ser usada como favicon. Para los navegadores como IE10 y sus versiones anteriores, podemos utilizar imágenes ICO. Las imágenes ICO tienen la extensión .ico. Podemos utilizar herramientas como ConvertICO para convertir las imágenes PNG en ICO. El sitio web convertirá la imagen en formato ICO y nos permitirá descargarla. A continuación, utilice la ruta de la imagen en el atributo href en la etiqueta <link> como se hace en el primer método. Entonces, podremos ver el favicon en la página web.Código de ejemplo:<head>