css - para - insertar iconos en html
Usa iconos impresionantes de fuentes en CSS (11)
Además de la respuesta de Diodeus anterior, necesita la font-family: FontAwesome regla font-family: FontAwesome (asumiendo que tiene la regla @font-face para FontAwesome declarada ya en su CSS). Entonces se trata de saber qué valor de contenido CSS corresponde a qué icono.
Los he listado todos aquí: http://astronautweb.co/snippet/font-awesome/
Tengo algunos CSS que se parecen a esto:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
Me gustaría reemplazar la imagen con un ícono de Font Awesome .
No veo de ninguna manera el uso del icono en CSS como imagen de fondo. ¿Es posible hacerlo asumiendo que las hojas de estilo / fuentes Font Awesome se carguen antes de mi CSS?
Alternativamente, si usa Sass, uno puede "extender" los íconos FA para mostrarlos:
.mytextwithicon:before {
@extend .fas, .fa-angle-double-right;
@extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
Consolidando todo lo anterior, la siguiente es la clase final que funciona bien.
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "/f0a9";
}
En realidad, incluso una font-awesome CSS tiene una estrategia similar para configurar sus estilos de iconos. Si desea obtener una retención rápida del código del icon , verifique el non-minified font-awesome.css y allí están ... cada fuente en su pureza.
No hay necesidad de incrustar contenido en el CSS. Puede colocar el contenido de la insignia dentro del elemento fa, luego ajustar la insignia css. http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
No puede usar texto como imagen de fondo, pero puede usar :before o :after pseudo clases para colocar un carácter de texto donde lo desee, sin tener que agregar todo tipo de recargo extra.
Asegúrese de establecer la position:relative a su envoltorio de texto real para que el posicionamiento funcione.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "/25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDITAR:
Font Awesome v5 usa otros nombres de fuentes que las versiones anteriores:
- Para FontAwesome v5, versión gratuita, use:
font-family: "Font Awesome 5 Free" - Para FontAwesome v5, versión Pro, use:
font-family: "Font Awesome 5 Pro"
Tenga en cuenta que también debe establecer la misma propiedad font-weight (parece ser 900).
Otra forma de encontrar el nombre de la fuente es hacer clic derecho en un ícono de fuente impresionante de muestra en su página y obtener el nombre de la fuente (de la misma manera que se puede encontrar el código del ícono utf-8, pero tenga en cuenta que puede encontrarlo en :before ) .
Para esto solo necesita agregar el atributo de content y font-family atributo de font-family al elemento requerido a través de: antes o: después donde sea aplicable.
Por ejemplo: quería adjuntar un icono de archivo adjunto después de todo a elemento dentro de mi publicación. Entonces, primero necesito buscar si tal ícono existe en fontawesome. Como en el caso lo encontré here , es decir, fa fa-paperclip . Luego, haga clic con el botón derecho en el ícono que está allí y vaya a la propiedad ::before pseudo propiedad para buscar la etiqueta de content que está usando, que en mi caso encontré que era /f0c6 . Entonces usaría eso en mi css así:
.post a:after {
font-family: FontAwesome,
content: " /f0c6" /* I added a space before / for better UI */
}
Para usar una fuente impresionante usando css, sigue los pasos a continuación:
paso 1 - Añadir fuentes de FontAwesome en CSS
/*Font Awesome Fonts*/
@font-face {
font-family: ''FontAwesome'';
//in url add your folder path of FontAwsome Fonts
src: url(''font-awesome/fontawesome-webfont.ttf'') format(''truetype'');
}
Paso - 2 Usa el css a continuación para aplicar la fuente en el elemento de clase de HTML
.sorting_asc:after {
content: "/f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
Y finalmente, use la clase " sorting_asc " para aplicar el css en la etiqueta / elemento HTML deseado.
Puedes probar esta clase de ejemplo. y encuentre el contenido del ícono aquí: http://astronautweb.co/snippet/font-awesome/
#content h2:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "/f007";
}
Use el siguiente programa de Python a través de la línea de comandos para crear imágenes png a partir de iconos de Font-Awesome:
#content h2:before {
content: "/f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Enlace de ejemplo: https://codepen.io/bungeedesign/pen/XqeLQg
Obtenga el código del icono en: https://fontawesome.com/cheatsheet?from=io