--- 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 "&#x" + Integer.toHexString(codepoint) + ";";   }   @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 `.` 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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
// Copyright 2014 The Go Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

// +build !go1.9

package context

import "time"

// A Context carries a deadline, a cancelation signal, and other values across
// API boundaries.
//
// Context's methods may be called by multiple goroutines simultaneously.
type Context interface {
	// Deadline returns the time when work done on behalf of this context
	// should be canceled. Deadline returns ok==false when no deadline is
	// set. Successive calls to Deadline return the same results.
	Deadline() (deadline time.Time, ok bool)

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

	// Err returns a non-nil error value after Done is closed. Err returns
	// Canceled if the context was canceled or DeadlineExceeded if the
	// context's deadline passed. No other values for Err are defined.
	// After Done is closed, successive calls to Err return the same value.
	Err() error

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

// A CancelFunc tells an operation to abandon its work.
// A CancelFunc does not wait for the work to stop.
// After the first call, subsequent calls to a CancelFunc do nothing.
type CancelFunc func()