---
title: Using Font Icons
order: 53
layout: page
---

[[using-font-icons-in-vaadin-7.2]]
= Using font icons in Vaadin 7.2

A “font icon” is an icon that is a glyph (essentially a character) from
a font. A font that is made for this purpose (containing only icons) is
called an “icon font”. Font icons scale well (being vectors), so you do
not have to make icons for a specific pixel size. Icon fonts are also
typically very light-weight (in bytes), and easy to use once set up.

Vaadin 7.2 comes with generic support for font icons, and has the
popular http://fortawesome.github.io/Font-Awesome/[FontAwesome] icon font
built-in. The support is ‘generic’, in the sense that it does not
include some of the advanced styling options specifically available in
FontAwesome (such as spinning icons). 

FontAwesome is included in the theme by default, but the fonts are only
loaded by the browser when used. If needed, you can also remove the CSS,
minimize the font, or make a custom font.

A demo application showing the result is
https://github.com/Porotype/FontIconDemo[available onGitHub] 
(https://github.com/Porotype/FontIconDemo/tree/master/src/com/example/fonticondemo[java],
https://github.com/Porotype/FontIconDemo/blob/master/WebContent/VAADIN/themes/fonticondemo/fonticondemo.scss[scss])

[[using-fontawesome]]
Using FontAwesome
~~~~~~~~~~~~~~~~~

You can use font icons with the familiar `setIcon()` method. It looks like
this, when using the built-in FontAwesome:

[source,java]
....
button.setIcon(FontAwesome.BOOKMARK);
....

You can also easily embed an icon in any place that allows HTML: 

[source,java]
....
label.setContentMode(ContentMode.HTML);
label.setValue("Press " + FontAwesome.BOOKMARK.getHtml() + " to bookmark");
....

[[making-a-custom-set-of-icons]]
Making a custom set of icons
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

There are many tools for making icons, and icon fonts. One of our
favorite tools is http://icomoon.io/app[IcoMoon], which is an excellent
online application where you can pick icons from a vast library of
ready-made icon fonts, to compose your own set of icons. When you’re
done, you can download a zip that contains your font files - just copy
the ‘fonts’ folder to your theme.

1.  Browse to http://icomoon.io/app
2.  _Add icons from library_ (the first time, some icons sets are added
automatically)
3.  _Add_ the icon set(s) you fancy (notice the licenses)
4.  Mark the icons you want in your font
5.  _Download_ the font

In IcoMoon you can also produce a customized version of FontAwesome, if
you for instance want to remove unused icons, or swap individual icons.
You can also re-upload your custom icon font, if you want to make
changes or additions to it later. 

1.  _Import icons_
2.  Add/delete/swap icons
3.  _Download_ the new font

When using ready-made icons, please pay attention to the licenses the
different icon sets have.

[[using-a-custom-icon-font]]
Using a custom icon font
~~~~~~~~~~~~~~~~~~~~~~~~

To use your own icon set, you need to do four things: 

1.  Make an icon font
2.  Make it easily usable from Java and
3.  Load the font in your theme
4.  Use the icons in your application.

(You can skip #1 if you already have an icon font you want to use.)

*1. Compose an icon font* in e.g IcoMoon, download, and copy the “fonts”
folder from the zip to your theme.

*2. Add the following to your styles.scss* OUTSIDE of the `.mytheme{}` block:

[source,scss]
....
@include font(IcoMoon, '../../fonticondemo/fonts/icomoon');
....

The first parameter, “IcoMoon”, is the font-family - i.e the name you
want to use for your font. You can choose anything, as long as you use
the same name in Java later. +
The second parameter is the filename base; in this case the files are
called icomoon.ttf, icomoon.svg, etc...

*3. Make use of the icons in Java;* you can make an anonymous FontIcon
instance, but in practice you will probably want to make an enum or some
sort of icon factory. The FontAwesome implementation uses an enum, in
this manner:

[source,java]
....
  private final int codepoint;

  IcoMoon(int codepoint) {
    this.codepoint = codepoint;
  }

  @Override
  public String getFontFamily() {
    // This must match the name you use in your (S)CSS
    return "IcoMoon";
  }

  @Override
  public int getCodepoint() {
    return codepoint;
  }

  @Override
  public String getHtml() {
    return "<span class=\"v-icon IcoMoon\">&#x"
        + Integer.toHexString(codepoint) + ";</span>";
  }

  @Override
  public String getMIMEType() {
    throw new UnsupportedOperationException("Not supported for FontIcon");
  }
....

(Note that you can easily generate the enum from the list of icons in
the zip downloaded from IcoMoon.)

*4. Now you can use your icon:*

[source,java]
....
  button.setIcon(IcoMoon.RIBBON);
....

[[styling-font-icons]]
Styling font icons
~~~~~~~~~~~~~~~~~~

You can not generally set style names on the icon itself, instead you
apply styles to the _component_ where the icon is used, much in the same
way you would style anything else in a component.

Given a button with a font icon and a style name:

[source,java]
....
  button.addStyleName("redicon");
  button.setIcon(FontAwesome.SAVE);
....

…you can then style the icon by applying styles to the .v-icon element:

[source,css]
....
  .redicon .v-icon {
    color: red;
    font-size: 20px;
  }
....

Note that the icon is actually text, so you style it in much the same
way you style text. 

A font icon also gets an additional `.<font-family>` stylename, so you can
apply styles to only font icons (not ‘regular’ image icons):

[source,css]
....
.v-button .FontAwesome {
  color: blue;
}
....
'n40' href='#n40'>40</a>
<a id='n41' href='#n41'>41</a>
<a id='n42' href='#n42'>42</a>
<a id='n43' href='#n43'>43</a>
<a id='n44' href='#n44'>44</a>
<a id='n45' href='#n45'>45</a>
<a id='n46' href='#n46'>46</a>
<a id='n47' href='#n47'>47</a>
<a id='n48' href='#n48'>48</a>
<a id='n49' href='#n49'>49</a>
<a id='n50' href='#n50'>50</a>
<a id='n51' href='#n51'>51</a>
<a id='n52' href='#n52'>52</a>
<a id='n53' href='#n53'>53</a>
<a id='n54' href='#n54'>54</a>
<a id='n55' href='#n55'>55</a>
<a id='n56' href='#n56'>56</a>
<a id='n57' href='#n57'>57</a>
<a id='n58' href='#n58'>58</a>
<a id='n59' href='#n59'>59</a>
<a id='n60' href='#n60'>60</a>
<a id='n61' href='#n61'>61</a>
<a id='n62' href='#n62'>62</a>
<a id='n63' href='#n63'>63</a>
<a id='n64' href='#n64'>64</a>
<a id='n65' href='#n65'>65</a>
<a id='n66' href='#n66'>66</a>
<a id='n67' href='#n67'>67</a>
<a id='n68' href='#n68'>68</a>
<a id='n69' href='#n69'>69</a>
<a id='n70' href='#n70'>70</a>
<a id='n71' href='#n71'>71</a>
<a id='n72' href='#n72'>72</a>
<a id='n73' href='#n73'>73</a>
<a id='n74' href='#n74'>74</a>
<a id='n75' href='#n75'>75</a>
<a id='n76' href='#n76'>76</a>
<a id='n77' href='#n77'>77</a>
<a id='n78' href='#n78'>78</a>
<a id='n79' href='#n79'>79</a>
<a id='n80' href='#n80'>80</a>
<a id='n81' href='#n81'>81</a>
<a id='n82' href='#n82'>82</a>
<a id='n83' href='#n83'>83</a>
<a id='n84' href='#n84'>84</a>
<a id='n85' href='#n85'>85</a>
<a id='n86' href='#n86'>86</a>
<a id='n87' href='#n87'>87</a>
<a id='n88' href='#n88'>88</a>
<a id='n89' href='#n89'>89</a>
<a id='n90' href='#n90'>90</a>
<a id='n91' href='#n91'>91</a>
<a id='n92' href='#n92'>92</a>
<a id='n93' href='#n93'>93</a>
<a id='n94' href='#n94'>94</a>
<a id='n95' href='#n95'>95</a>
<a id='n96' href='#n96'>96</a>
<a id='n97' href='#n97'>97</a>
<a id='n98' href='#n98'>98</a>
<a id='n99' href='#n99'>99</a>
<a id='n100' href='#n100'>100</a>
<a id='n101' href='#n101'>101</a>
<a id='n102' href='#n102'>102</a>
<a id='n103' href='#n103'>103</a>
<a id='n104' href='#n104'>104</a>
<a id='n105' href='#n105'>105</a>
<a id='n106' href='#n106'>106</a>
<a id='n107' href='#n107'>107</a>
<a id='n108' href='#n108'>108</a>
<a id='n109' href='#n109'>109</a>
</pre></td>
<td class='lines'><pre><code><style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span><span class="c1">// Copyright 2014 The Go Authors. All rights reserved.</span>
<span class="c1">// Use of this source code is governed by a BSD-style</span>
<span class="c1">// license that can be found in the LICENSE file.</span>

<span class="c1">// +build !go1.9</span>

<span class="kn">package</span><span class="w"> </span><span class="nx">context</span>

<span class="kn">import</span><span class="w"> </span><span class="s">&quot;time&quot;</span>

<span class="c1">// A Context carries a deadline, a cancelation signal, and other values across</span>
<span class="c1">// API boundaries.</span>
<span class="c1">//</span>
<span class="c1">// Context&#39;s methods may be called by multiple goroutines simultaneously.</span>
<span class="kd">type</span><span class="w"> </span><span class="nx">Context</span><span class="w"> </span><span class="kd">interface</span><span class="w"> </span><span class="p">{</span>
<span class="w">	</span><span class="c1">// Deadline returns the time when work done on behalf of this context</span>
<span class="w">	</span><span class="c1">// should be canceled. Deadline returns ok==false when no deadline is</span>
<span class="w">	</span><span class="c1">// set. Successive calls to Deadline return the same results.</span>
<span class="w">	</span><span class="nx">Deadline</span><span class="p">()</span><span class="w"> </span><span class="p">(</span><span class="nx">deadline</span><span class="w"> </span><span class="nx">time</span><span class="p">.</span><span class="nx">Time</span><span class="p">,</span><span class="w"> </span><span class="nx">ok</span><span class="w"> </span><span class="kt">bool</span><span class="p">)</span>

<span class="w">	</span><span class="c1">// Done returns a channel that&#39;s closed when work done on behalf of this</span>
<span class="w">	</span><span class="c1">// context should be canceled. Done may return nil if this context can</span>
<span class="w">	</span><span class="c1">// never be canceled. Successive calls to Done return the same value.</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// WithCancel arranges for Done to be closed when cancel is called;</span>
<span class="w">	</span><span class="c1">// WithDeadline arranges for Done to be closed when the deadline</span>
<span class="w">	</span><span class="c1">// expires; WithTimeout arranges for Done to be closed when the timeout</span>
<span class="w">	</span><span class="c1">// elapses.</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// Done is provided for use in select statements:</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">//  // Stream generates values with DoSomething and sends them to out</span>
<span class="w">	</span><span class="c1">//  // until DoSomething returns an error or ctx.Done is closed.</span>
<span class="w">	</span><span class="c1">//  func Stream(ctx context.Context, out chan&lt;- Value) error {</span>
<span class="w">	</span><span class="c1">//  	for {</span>
<span class="w">	</span><span class="c1">//  		v, err := DoSomething(ctx)</span>
<span class="w">	</span><span class="c1">//  		if err != nil {</span>
<span class="w">	</span><span class="c1">//  			return err</span>
<span class="w">	</span><span class="c1">//  		}</span>
<span class="w">	</span><span class="c1">//  		select {</span>
<span class="w">	</span><span class="c1">//  		case &lt;-ctx.Done():</span>
<span class="w">	</span><span class="c1">//  			return ctx.Err()</span>
<span class="w">	</span><span class="c1">//  		case out &lt;- v:</span>
<span class="w">	</span><span class="c1">//  		}</span>
<span class="w">	</span><span class="c1">//  	}</span>
<span class="w">	</span><span class="c1">//  }</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// See http://blog.golang.org/pipelines for more examples of how to use</span>
<span class="w">	</span><span class="c1">// a Done channel for cancelation.</span>
<span class="w">	</span><span class="nx">Done</span><span class="p">()</span><span class="w"> </span><span class="o">&lt;-</span><span class="kd">chan</span><span class="w"> </span><span class="kd">struct</span><span class="p">{}</span>

<span class="w">	</span><span class="c1">// Err returns a non-nil error value after Done is closed. Err returns</span>
<span class="w">	</span><span class="c1">// Canceled if the context was canceled or DeadlineExceeded if the</span>
<span class="w">	</span><span class="c1">// context&#39;s deadline passed. No other values for Err are defined.</span>
<span class="w">	</span><span class="c1">// After Done is closed, successive calls to Err return the same value.</span>
<span class="w">	</span><span class="nx">Err</span><span class="p">()</span><span class="w"> </span><span class="kt">error</span>

<span class="w">	</span><span class="c1">// Value returns the value associated with this context for key, or nil</span>
<span class="w">	</span><span class="c1">// if no value is associated with key. Successive calls to Value with</span>
<span class="w">	</span><span class="c1">// the same key returns the same result.</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// Use context values only for request-scoped data that transits</span>
<span class="w">	</span><span class="c1">// processes and API boundaries, not for passing optional parameters to</span>
<span class="w">	</span><span class="c1">// functions.</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// A key identifies a specific value in a Context. Functions that wish</span>
<span class="w">	</span><span class="c1">// to store values in Context typically allocate a key in a global</span>
<span class="w">	</span><span class="c1">// variable then use that key as the argument to context.WithValue and</span>
<span class="w">	</span><span class="c1">// Context.Value. A key can be any type that supports equality;</span>
<span class="w">	</span><span class="c1">// packages should define keys as an unexported type to avoid</span>
<span class="w">	</span><span class="c1">// collisions.</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// Packages that define a Context key should provide type-safe accessors</span>
<span class="w">	</span><span class="c1">// for the values stores using that key:</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// 	// Package user defines a User type that&#39;s stored in Contexts.</span>
<span class="w">	</span><span class="c1">// 	package user</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// 	import &quot;golang.org/x/net/context&quot;</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// 	// User is the type of value stored in the Contexts.</span>
<span class="w">	</span><span class="c1">// 	type User struct {...}</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// 	// key is an unexported type for keys defined in this package.</span>
<span class="w">	</span><span class="c1">// 	// This prevents collisions with keys defined in other packages.</span>
<span class="w">	</span><span class="c1">// 	type key int</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// 	// userKey is the key for user.User values in Contexts. It is</span>
<span class="w">	</span><span class="c1">// 	// unexported; clients use user.NewContext and user.FromContext</span>
<span class="w">	</span><span class="c1">// 	// instead of using this key directly.</span>
<span class="w">	</span><span class="c1">// 	var userKey key = 0</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// 	// NewContext returns a new Context that carries value u.</span>
<span class="w">	</span><span class="c1">// 	func NewContext(ctx context.Context, u *User) context.Context {</span>
<span class="w">	</span><span class="c1">// 		return context.WithValue(ctx, userKey, u)</span>
<span class="w">	</span><span class="c1">// 	}</span>
<span class="w">	</span><span class="c1">//</span>
<span class="w">	</span><span class="c1">// 	// FromContext returns the User value stored in ctx, if any.</span>
<span class="w">	</span><span class="c1">// 	func FromContext(ctx context.Context) (*User, bool) {</span>
<span class="w">	</span><span class="c1">// 		u, ok := ctx.Value(userKey).(*User)</span>
<span class="w">	</span><span class="c1">// 		return u, ok</span>
<span class="w">	</span><span class="c1">// 	}</span>
<span class="w">	</span><span class="nx">Value</span><span class="p">(</span><span class="nx">key</span><span class="w"> </span><span class="kd">interface</span><span class="p">{})</span><span class="w"> </span><span class="kd">interface</span><span class="p">{}</span>
<span class="p">}</span>

<span class="c1">// A CancelFunc tells an operation to abandon its work.</span>
<span class="c1">// A CancelFunc does not wait for the work to stop.</span>
<span class="c1">// After the first call, subsequent calls to a CancelFunc do nothing.</span>
<span class="kd">type</span><span class="w"> </span><span class="nx">CancelFunc</span><span class="w"> </span><span class="kd">func</span><span class="p">()</span>
</pre></div>
