Utilizar Font Awesome PRO en Flarum

RodrYC

Me gustaría saber como puedo utilizar los iconos de https://fontawesome.com/ PRO he visto que algunos foros ya los utilizan pero no se como activarlos, cuando pongo la etiqueta de un icono PRO como este <i class="far fa-cat"></i> no funciona, no se si hay alguien mas al que le pase esto

Darkle

RodrYC Para ello, primero deberás extraer tus archivos de Font Awesome PRO en un directorio, por ejemplo en la raiz en una carpeta llamada "fontawesome", una vez tengas los archivos en el directorio podrás añadir el siguiente código a tu sitio:

<style>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('fontawesome'),
       url('/fonts/open-sans-v17-latin-300.woff2'),
       url('/fonts/open-sans-v17-latin-300.woff'); 
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('fontawesome'),
       url('/fonts/open-sans-v16-latin-regular.woff2'), 
       url('/fonts/open-sans-v16-latin-regular.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('fontawesome'),
       url('/fonts/open-sans-v16-latin-italic.woff2'), 
       url('/fonts/open-sans-v16-latin-italic.woff'); 
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('fontawesome'),
       url('/fonts/open-sans-v16-latin-600.woff2'),
       url('/fonts/open-sans-v16-latin-600.woff'); 
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('fontawesome'),
       url('/fonts/open-sans-v16-latin-600italic.woff2'),
       url('/fonts/open-sans-v16-latin-600italic.woff'); 
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('fontawesome'),
       url('/fonts/open-sans-v16-latin-700.woff2'), 
       url('/fonts/open-sans-v16-latin-700.woff');
}
</style>
  <link href="/fontawesome/css/all.css" rel="stylesheet">

Te recomiendo que si tienes instalada la extensión HTML Head Items escribas la ultima línea en la extensión
<link href="/fontawesome/css/all.css" rel="stylesheet">

La parte engorrosa de esto es que luego tienes que ir al CSS del sitio y cambiar las referencias de Font Awesome Free, por ejemplo:

.fa, .fas {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400 !important;
}

Otro ejemplo:

.item-discussion-views:before {
    font-family: 'Font Awesome 5 Pro';
}

Te recomiendo utilizar find/replace, habrá muchas cosas que aparecerán "rotas" hasta que sustituyas todas las referencias de Font Awesome Free.

Solución original por Phenomlab

FlarumES es una comunidad oficial aprobada por Flarum.org y funciona de forma independiente a la Fundación Flarum. Para obtener más información, visite esta página.