Here are some instructions for using the web-font.
This tutorial specifically uses Entypo Pictograms created by Daniel Bruce. You can download the files at www.entypo.com.
Step 1: Download the font-files (there should be .eot, tff, .svg, and .woff) and put them in a location where you can reference them.
Step 2: In your CSS stylesheet, declare the font.
@font-face
{
font-family: Entypo;
src: url('https://open-logix.com/wp-content/themes/openlogix/fonts/webfonts/entypo.eot'),
url('https://open-logix.com/new/wp-content/themes/openlogix/fonts/webfonts/entypo.woff')
url('https://open-logix.com/wp-content/themes/openlogix/fonts/webfonts/entypo.ttf'),
url('https://open-logix.com/wp-content/themes/openlogix/fonts/webfonts/entypo.svg');
}
.entText
{
font-family: Entypo;
font-size: 50px;
color: black;
}
Step 4: Test It
✎
Pencil (unicode)
The uses will vary on whether the browsers are supporting and if the viewer has the font installed.
A B C D E F G H I
g h i j k l m n o
Letters will render as the pictograms if the font is installed on the user machine, but not through referencing the @font-face only. You can add functionality as you would anything else. Click the refresh pictogram to refresh the page.
| w/in <p> | w/in <h2> | w/in <span> |
|---|---|---|
| | |
⟳ Refresh | ⟳Refresh | ⟳ Refresh |
Note that within some elements, not all unicode characters may render correctly in certain browsers. The characters in the chart only work in the paragraph and span, not the h2.
Chome didn’t render either of the two <h2> characters. IE and Safari only rendered the Refresh <h2>. On Firefox, it rendered the Refresh fine, but the print <h2> pictogram showed up as something else. However, all the <p> and <span> characters rendered the same in all 4 browsers.
It is a good idea to stay consistent within <p> or <span> text and test within multiple browsers. If you are using a mobile browser for these maps, it is more crucial to test on a few phones to ensure best coverage. Any mobile web apps could have render issues and make the application look broken or sloppy.
Step 5: Enjoy. Hopefully that clears some things up. Enjoy using your new font/Character map.
If you have questions or would like a tutorial request, let me know at HarryH@www.open-logix.com
