Incrustando iconos desde fontawesome o cualquier otro servicio de iconos usando una fuente como puede ser fontello o icomoon entre otros.

Uso de fuentes para iconos

Normalmente vengo usando iconos de fuentes que provienen de algún tercero como puede ser fontawesome o fontello. El uso de este tipo de recursos es muy sencillo:

// Referenciamos al archivo vía CDN, o si queremos lo descargamos
  <link href="{cdnServer}/font-awesome.min.css" rel="stylesheet">
  // y lo pintamos con las siguientes clases, una general fa 
  // y otra específica fa-camera-reto
  <i class="fa fa-camera-retro"></i>

A lo largo de todo el proyecto podemos pintar iconos con dos clases. Si queremos ajustar el tamaño también tenemos su clase modificadora que será:

.fa // estilos generales para icono
  .fa-camera-retro // estilo específico para icono de una cámara
     .fa-lg  // estilos modificadores para el tamaño
     .fa-2x  //  ""
     .fa-3x  //  ""
     .fa-4x  //  ""
     .fa-5x  //  ""

En fín, más info en la web de fontawesome.

El reto

A veces el diseño requiere solo presentar el icono cuando un evento es lanzado, un onclick por ejemplo es el más común. Muestrame un icono de fontawesome solo cuando hago click en ese elemento.

Como todo reto se puede abordar con varias técnicas, una común es poner una clase en el elemento que ha sido clickado y mostrar el icono pero esta técnica te obliga a dejar un elemento invisible y hmm, se puede mejorar.

La solución que adopté

1) Cremos una lista común y le añadimos la clase .js-active que se suscribe al evento onclick para añadirle una clase, ver en script.coffee más abajo.

#index.haml
.wrapper
  %h1
    Embedding icons from fontawesome or whatever
  %p
    Sometimes you need to have icons only when an event is triggered. You might use an empty element to do that, this mixin is to avoid use that technique.
.wrapper 
  %h2
    &:before
  - @menuItems = ['Date (Old)','Date (New)','Name (A-Z)','Name (Z-A)']
  %ul.list
    - @menuItems.each do |item|
      %li.list-item
        %a.list-item__lnk.-thm-1.js-active{:href=>"#"}
          #{item}
.wrapper
  %h2
    &:after
    %ul.list
      - @menuItems.each do |item|
        %li.list-item
          %a.list-item__lnk.-thm-2.js-active{:href=>"#"}
            #{item}

2) Añadimos una clase -current al elemento clickado.

#script.coffee
$('.js-active').on 'click', (e)->
  e.preventDefault()
  $('.js-active').removeClass '-current'
  $(@).addClass '-current'

3) Creamos un mixin con las propiedades de fontawesome y con la posibilidad de configurarlo con 4 parámetros:

  • $code_icon: código en unicode para ese icono (‘f045’)
  • $fontSize: tamaño del icono ($normal-size)
  • $color: color para ese icono ($aqua)
  • $position: posición, si al principio o al final del elemento ($before $after)
//styles.scss
$pull-unit: 1.1rem;
 
@mixin embed-icon($code_icon, $fontSize:auto, $color: inherit, $position: before){
  @if($code_icon == ""){
    $code_icon:  'No icon defined';
    $color: red;
  }
  //Los estilos propios de fontawesome para los iconos
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  &:#{$position}{  
    position: relative;
    content:'#{$code_icon}';
    font-size: $fontSize;
    color: $color;
    // Para ajustar la posición del icono por la izquierda
    // y no empuje al texto le damos un margen negativo
    margin-left: -($pull-unit); 
    @if ($position == after){
      margin-left: 0;
    }
  }
}

// Creamos el objeto lista
.list{
  width: 100%;
  margin:  1rem auto;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
 
.list-item{
  padding: .5rem 1rem;
}
.list-item__lnk{
  position: relative;
  text-decoration: none;
  font-size: .9rem;
  color: grey;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
 
  &.-thm-1{
    // Dejamos amablemente espacio para el icono
    margin-left: $pull-unit;
    &.-current{
      // Usamos el mixin para el elemento con la clase -current
      @include embed-icon('\f00c', 1em, green, before);
    }
  }
}

Demo

See the Pen Embedding icons from Font Awesome by Davilious (@davilious) on CodePen.

¡Feliz código!