Fontcons
Overview
In a single collection, Fontcons is a pictographic language designed for a full array of web-related actions and content. Although originally inspired by Font Awesome, we've heavily modified and added to the available icons; Fontcons brings over 250 icons for use in a package equivalent in file size to just one or two bitmapped icons!
Integration
The open source package contains several bootstrap CSS files for inclusion in your template. These stylesheets can be found in the web root's /media/system/css directory. Here, our attention is on `fontcons.css` which contains the necessary @font-face rules to start using Fontcons.
@font-face {
font-family: 'Fontcons';
src: url('/media/system/css/fonts/fontcons-webfont.eot');
src: url('/media/system/css/fonts/fontcons-webfont.eot?#iefix') format('embedded-opentype'),
url('/media/system/css/fonts/fontcons-webfont.woff') format('woff'),
url('/media/system/css/fonts/fontcons-webfont.ttf') format('truetype'),
url('/media/system/css/fonts/fontcons-webfont.svg#FontconsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
While you can include Fontcons on a per use basis (e.g., individual components), due to it being relatively light-weight and several Hubzero components making use of it, we recommend including the stylesheet into your site template.
In the <head> of your template's html, reference the location to fontcons.css:
<link rel="stylesheet" href="/media/system/css/fontcons.css" />
Or import fontcons.css into your site's CSS:
/* Note: import rules MUST come first */ @import "/media/system/css/fontcons.css"; /* Other styles here */
A word of caution on using @import: Internet Explorer 8 and older will download stylesheets in sequence rather than in parallel. This can have effects on page speed and flashes of un-styled content before the CSS files have finished downloading. See Steve Souder's "don’t use @import" for more details.
Use
There are two primary ways to use the font, both with advantages and disadvantages. The first, is to include the necessary HTML and unicode character directly into your markup.
The HTML:
<a href="#"><span class="edit">✎</span> edit</a>
The CSS:
.edit {
font-family: "Fontcons"
}
The advantage here is greater browser compatibility. @font-face is supported by even Internet Explorer 6. The disadvantage, however, is that you now have to edit the HTML wherever you wish to insert an icon which could change depending upon the styling and theme of your template. That could quickly become a headache!
The alternative is to use the CSS pseudo-elements :before and :after. This takes a little more setup in your styles but offers greater flexibility and ease of change. Unfortunately, pseudo-elements are not supported in Internet Explorer 7 or older. There is, however, a solution which we'll get to in a moment.
The HTML:
<a class="edit" href="#">edit</a>
The CSS:
/* Note the :before pseudo-element */
small.edit, /* for IE 7, more on that below */
.edit:before {
font-family: "Fontcons"
content: "\\270E"; /* unicode characters must start with a backslash */
}
What about Internet Explorer 7?
.edit {
*zoom:expression(this.runtimeStyle['zoom']='1', this.innerHTML='<small class="edit">✎</small>' + this.innerHTML);
}
We use <small> in the example above since it's a relatively unused tag and lessens the potential for styling conflicts. It should be noted that over-use of this technique can slow down IE 7 as it has to process and dynamically include content into the page upon render.