Menu icon Foundation
Buttons with icons

I am new at Foundation. I need to add icons to my buttons. Should I use "Foundation Icon Fonts 3"? If yes what is the best way to do it? What I'm trying to achieve as a result is something like this (in Bootstrap 3).

Thank you.

Screenshot from 2014 02 02 11 47 12

buttonicon font

I am new at Foundation. I need to add icons to my buttons. Should I use "Foundation Icon Fonts 3"? If yes what is the best way to do it? What I'm trying to achieve as a result is something like this (in Bootstrap 3).

Thank you.

Screenshot from 2014 02 02 11 47 12

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hi Artur!

Using the Icon Fonts are probably the easiest way! The instructions for using them are pretty straightforward and are available on the Icon Font's page in ZURB's playground: http://zurb.com/playground/foundation-icon-fonts-3

Here is some example code:

<a href="#" class="button yourClass"><i class="fi-star"></i>Star</a>

You can then custom style it with CSS using yourClass to create the example you gave.

.yourClass{
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

An alternative would be to create some of your own icons in a graphic media editor (Illustrator, Photoshop, etc), export them as a PNG in the size you want and then use this code:

<a href="#" class="button yourClass"><img src="your/img/path.png" alt="YourAltTxt" />Star</a>

You can then custom style it with CSS using yourClass to create the example you gave.

.yourClass{
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

Although Foundation's Icon Fonts are pretty expansive, they might not have the icons or styles you want so the alternative method would do great as well.

Wing-Hou Chan over 5 years ago

Hi Artur!

Using the Icon Fonts are probably the easiest way! The instructions for using them are pretty straightforward and are available on the Icon Font's page in ZURB's playground: http://zurb.com/playground/foundation-icon-fonts-3

Here is some example code:

<a href="#" class="button yourClass"><i class="fi-star"></i>Star</a>

You can then custom style it with CSS using yourClass to create the example you gave.

.yourClass{
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

An alternative would be to create some of your own icons in a graphic media editor (Illustrator, Photoshop, etc), export them as a PNG in the size you want and then use this code:

<a href="#" class="button yourClass"><img src="your/img/path.png" alt="YourAltTxt" />Star</a>

You can then custom style it with CSS using yourClass to create the example you gave.

.yourClass{
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

Although Foundation's Icon Fonts are pretty expansive, they might not have the icons or styles you want so the alternative method would do great as well.