title: Font-Awesome ExtJS ActionColumn
body: <p>I'm Using FontAwesome with ExtJS in my app. </p>
  
  <p>All other buttons are working fine with font awesome when I do this:</p>
  
  <pre><code> iconCls: 'fa fa-edit'
  </code></pre>
  
  <p>But when using the same configuration in the actioncolumn (Component that allow you to put buttons on a Grid) the icon simply doesn't appear. </p>
  
  <p>Does anyone have an idea why?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>After trying @qdev answer: I'm just seeing a ?#f040; text rendered (in blue).</p>
  
  <p>The generated HTML for the action column button:</p>
  
  <pre><code>&lt;span data-qtip="Edita registro" style="font-family:FontAwesome" class="x-action-col-icon x-action-col-glyph x-action-col-2   " title="" role="button"&gt;�xf040;&lt;/span&gt;
  </code></pre>
  
  <p>CSS (Taken from firebug inspector):</p>
  
  <pre><code>element.style {
      font-family: FontAwesome;
  }
  *, *:before, *:after {
      box-sizing: border-box;
  }
  *, *:before, *:after {
      box-sizing: border-box;
  }
  .x-action-col-icon {
      cursor: pointer;
      height: 16px;
      width: 16px;
  }
  .x-border-box, .x-border-box * {
      box-sizing: border-box;
  }
  .x-action-col-glyph {
      color: #9bc8e9;
      font-size: 16px;
      line-height: 16px;
      width: 20px;
  }
  *, *:before, *:after {
      box-sizing: border-box;
  }
  element.style {
      text-align: center;
  }
  .x-grid-cell-inner-action-col {
      font-size: 0;
      line-height: 0;
  }
  .x-grid-cell-inner {
      white-space: nowrap;
  }
  .x-grid-cell {
      font: 11px/13px tahoma,arial,verdana,sans-serif;
  }
  .x-unselectable {
      cursor: default;
  }
  .x-grid-table {
      border-collapse: separate;
  }
  .x-unselectable {
      cursor: default;
  }
  .x-panel-body-default {
      color: black;
      font-size: 12px;
  }
  .x-panel-body-default {
      color: black;
      font-size: 12px;
  }
  .x-panel-body-default {
      color: black;
      font-size: 12px;
  }
  .x-panel-body-default {
      color: black;
      font-size: 12px;
  }
  .x-panel-body-default {
      color: black;
      font-size: 12px;
  }
  .x-panel-body-default {
      color: black;
      font-size: 12px;
  }
  .x-body {
      color: black;
      font-family: tahoma,arial,verdana,sans-serif;
      font-size: 12px;
  }
  body {
      color: #222222;
      cursor: default;
      font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
      font-style: normal;
      font-weight: normal;
      line-height: 150%;
  }
  html, body {
      font-size: 100%;
  }
  html, body {
      font-size: 100%;
  }
  </code></pre>