-3

Hola quería saber como puedo agregar un icono de Font...desde CSS y que archivos necesito vincular para que funcione. Solo por CSS se puede?

2
  • 2
    Si claro, cuando usas la librería de íconos en realidad estás llamando una hoja de estilos. El único archivo que necesitas es el que te indican en el sitio fontawesome.com/start Commented el 28 mar. 2019 a las 13:15
  • 1
    Has probado alguna cosa? Estas preguntas suelen marcarse como preguntas de baja calidad y acaban cerradas. Tienes que mostrar las pruebas que hayas hecho. Revisate cómo preguntar.
    – Marc
    Commented el 28 mar. 2019 a las 13:49

6 respuestas 6

8

FontAwesome es una librería como cualquier otra, por tanto para usarla lo primero que debes hacer es incluir esa librería (generalmente al inicio de tu documento), o bien tener en tu servidor los archivos de fuente con que trabaja FontAwesome.

La forma más simple sería incluir la propia librería de ellos. Esto se hace poniendo esto en tu documento:

<header>
<!-- Otros elementos del header -->
<!-- Librería de FA -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</header>

El código más reciente de la librería siempre es ofrecido en la sesion start de la página web de los creadores de FontAwesome.

Allí verás también que hay:

  • dos tipos de licencia de la librería: Free, Pro
  • cuatro versiones de la librería: All, Solid, Regular, Brands
  • dos tipos de contenido WebFont, SVG

Según actives cada opción, te pondrá los archivos que tienes que incluir en tu proyecto.


En cuanto a tu duda sobre su uso, creo que hablamos de dos cosas diferentes.

1. Añadir FA vía HTML, en cuyo caso sería simplemente así:

<span><i class="fa fa-user"></i> User</span>

Lo podemos ver funcionando:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<h3>Vía HTML (recomendada):</h3>
<p><i class="fa fa-user"></i> User</p>
<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>

2. Añadir FA vía CSS

Esto se hace mediante pseudo-elementos CSS, como se indica aquí:

Cuando no se tiene la opción de cambiar el HTML de su proyecto, podemos aprovechar una característica de CSS para agregar íconos a una página.

/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

/* Note: Make sure to include the correct weight and unicode value for the icon */
.tps::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f1ea";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<ul style="margin: 0;">
  <li><span class="icon login"></span> Login</li>
  <li><span class="icon tps"></span> TPS Reports</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>

Hay que señalar que FA existe para ser usado de una forma simple, como se ha indicado en (1), y que el uso vía CSS (mucho más complejo) es para aquellos casos en los que no se tenga acceso a modificar el HTML.

Usar FA vía CSS implicaría ciertas dificultades como:

  • Conocer el código para cada icono (aquí aparecen los iconos y la derecha sus códigos)
  • Manejar el tamaño del icono
  • Manejar la posición (antes o después)
  • Pensar en una lógica de cascada para organizar la presentación de los iconos
  • Asignar la clases a los elementos HTML
4

Sí se puede, con css y html. Si lo vas a usar local, que es lo que yo te recomiendo, lo debes descargar y copiar el css del fontawesome en una carpeta de tu sitio. Para este ejemplo se pone en una carpeta llamada css. Sería así:

Añades así en el <head> de tu html la línea para cargar el fichero css de fontawesome:

<link rel="stylesheet" href="http://localhost/mi_sitio/css/font-awesome.min.css" type="text/css">

Por supuesto reemplaza localhost/mi_sitio por la URL de tu sitio. Fíjate que he añadido el min, que es el fichero font-awesome.min.css, que es la versión minificada del css. Ésta es la recomendada para uso en producción ya que optimiza los tiempos de carga del sitio.

Después lo aplicas en tu html así:

<span class="add-icon"></span>

Aquí puedes usar cualquier etiqueta, no sólo tiene que ser span, puedes usar i por ejemplo.

Y luego en tu css puedes aplicarle el ícono a esa clase así:

.add-icon:before {
  content: "\f2b4";
}

Reemplaza el content por el código del ícono que desees. Debes buscar los códigos en la documentación del fontawesome.

Prueba así y nos cuentas si te funcionó. Saludos

4
  • 2
    Efectivamente así es como se añade iconos de Font Awesome desde CSS. Commented el 28 mar. 2019 a las 13:27
  • 2
    @Jesus Los comentarios son para aportar algo, decir efectivamente asi se hace o +1 o, en definitiva, cosas que no aporten nada a la respuesta o a la pregunta no tiene cabida, según las normas. es.stackoverflow.com/help/privileges/comment Echa un ojo a esto, al final de la página, para que veas como no se debería comentar y como sí. Un saludo Commented el 28 mar. 2019 a las 13:31
  • 2
    Muy buena tu respuesta Adriana, yo quitaría la opción de darle valor a content en CSS, como buena práctica no modificaría estos valores que están dentro del CSS de FontAwesome Commented el 28 mar. 2019 a las 13:36
  • @JheymanMejia Es una variante.... aquí no puedo poner todas, ya que el OP lo que necesita es una respuesta que lo ayude, si le pongo muchas puede que se pierda. Pero existen diversas formas de hacer esto, como el ejemplo que puso alguien por ahí de cargarlo desde una CDN, también es válida, pero la diversidad no significa siempre que una variante esté mejor que otra, a veces muchas pueden ser válidas. Commented el 28 mar. 2019 a las 13:44
3

[Entra aquí][1]

Pone esto en el HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Pon un icono cualquiera con la etiqueta

<i class="fab fa-accessible-icon"></i>
3

Buen día Mariano.

Lo que tienes que hacer es mirar donde está la documentación para poder consumirlo. En éste caso ésta es la URL. https://fontawesome.com/start

Lo que tienes que hacer es coger lo que te dan y ponerlo en el HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Luego de esto ya podrás poner un icono en tú proyecto.

Cuando eliges un icono o el que quieres usar te darán una etiqueta con la clase de el icono.

<i class="fab fa-accessible-icon"></i>

Al poner sólo eso ya aparecerá el icono que quieres dejar, recuerda que tienes que elegir el icono y en la parte superior te dejarán la etiqueta. Saludos.

1

para usar font awesome, tenes dos posibilidades o descargarlo (aconsejado) o utilizar el CDN (como hice en el ejemplo aqui abajo).

esta libreria ya viene en css con sus clases echas las cuales las podes encontrar aca.

el utilizo seria el siguienti :

<!-- CDN DE FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


<div>   <i class="fab fa-angellist fa-5x"></i>    <div>
<div>   <i class="fab fa-angellist fa-4x"></i>    <div>
<div>   <i class="fab fa-angellist fa-2x"></i>    <div>
<div>   <i class="fab fa-angellist"></i>    <div>

espero que te sea de ayuda

0

Bueno para esto tienes dos formas de hacerlo:

  1. Puedes entrar a la página de Fontawesome y descargarte los archivos necesarios y después incluir en tu html el .css y el .js

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/fontawesome.css">
</head>
<body>
	<div>
		<i class="fab fa-accessible-icon"></i>
	</div>

	<script src="js/fontawesome.min.js"></script>
</body>
</html>

De esta forma puedes ir viendo los iconos que tienen en la pagina e ir cambiando la clase de la etiqueta por el que tu quieras.

  1. Puedes agregar un link a tu html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
	<div>
		<i class="fab fa-accessible-icon"></i>
	</div>


</body>
</html>

y ya con eso solo basta ir agregando los iconos

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.