Bulma: Support for third party icons

[jnsdrtlf]

Checklist

• [X] This is about the Bulma CSS framework
• [ ] This is about the Bulma Docs
• [X] I'm using Bulma version [0.2.1]
• [x] My browser is: Google Chrome 53
• [ ] This is a Sass issue
• [X] I am sure this issue is not a duplicate?
  

  Description

When using bulma's has-icon helper class, you should not be restricted to the use of Font Awesome icons. I for example use the Material Design Icons from here.

So instead of <i class="fa fa-email"></i>, I use <i class="mdi mdi-email"></i>.

I suggest you add an helper class called is-icon so the new syntax looks like

<i class="is-icon fa fa-email"></i>
<i class="is-icon mdi mdi-email"></i>

Otherwise users have to add the fa class to every icon:

<i class="fa mdi mdi-email"></i>

[jptaylor]

+1. Whilst it's a fairly trivial tweak, it feels like there should be more variables around icons in general. The material icons look nice in Bulma, but the sizing has to be adjusted for them to really shine.

The form control has-icon attribute could benefit from some variables for sure.

[rafaelpimpa]

+1, currently using MDI on my project (and Bulma ofc), but it doesn't looks great like FA.

[iplanwebsites]

+1. Tweaking the MDI icons sizes and padding manually feels dirty.

[Wikiki]

Hi @jgthms ,

what about a creating a mixin we can use to add others third party icons ?

regards,

[jnsdrtlf]

@Wikiki have a look at the changes @jgthms made to the docs:
http://bulma.io/documentation/elements/icon/
Icons are now in a container so you can use virtually any Icon font available:

<!-- fa icons  -->
<span class="icon">
  <i class="fa fa-home"></i>
</span>

<!-- ionicons  -->
<span class="icon">
  <i class="ion-ionic ion-eye"></i>
</span>

<!-- ... it's the same for all fonts -->

I'm not quite sure whether a mixin is really needed, I see no use for it.

[Wikiki]

Wonderfull :-D

Thanks @jnsdrtlf.