1

I'm new to icon fonts.

I see fontawesome is really great, especially (from my point of view) for classes like fa-stack, fa-2x, fa-rotate-# because they increase available icons.

Fontello is super too. Especially (again from my point of view) because I can find much more icons, and using only the ones I really need. However I do not find all those fantastic fontawesome utilities in the css generated by fontello.

So the questions is: can I use fa-xxx utilities with any icons obtained by fontello? Alternatively, can I include fontawesome css and successfully apply it to fontello icons? Or, alternatively, is it possible porting fa-xxx utilities into fontello.css?

UPDATE:

I tested this scenario: importing fontawesome css and apply it to fontello icons; this is the result in Google Chrome v43:

  • fa-stacked with mixed fontello and font-awesome icons seems to work (maybe vertical centering is not perfect, still good)
  • fa-2x works
  • fa-flip-xxx and fa-rotate-xxx do not work
  • fa-spin and fa-pulse do work
  • fa-border do work

I do not know if this is true for all browsers/platforms. I do not know why flip and rotate do not work.

Next steps could be trying to include fontawesome classes into fontello-codes.css in order to use only fontello icon font ( --> smaller icon font)

andreav
  • 541
  • 5
  • 18

1 Answers1

0

I have a partial answer to your question.

In order to size the icons with the use of fontello only, use this css:

 .fa-1x {
    font-size: 1em;
  }
  .fa-2x {
    font-size: 2em;
  }
  .fa-3x {
    font-size: 3em;
  }
  .fa-4x {
    font-size: 4em;
  }
  .fa-5x {
    font-size: 5em;
  }

To have the icons spinning, include fontello's animation css file so you can use the 'animate-spin' like this:

<i class="icon-phone animate-spin fa-2x">

I am currently at the same point as you were at the time of writing your question, I am now on to the stacking feature, if I find it I will update my answer. If you have already figured it out please feel free to share :-)

Tobias Beuving
  • 630
  • 6
  • 18