[Phonegap+sencha Touch] Mobile development WebApp font icon production

Sencha Touch starting with 2.2, the icons used are all font icons (icon font), which is used as icons for the characters inside the font file.

Key Features

Fonts are vectors, and using the icon font to generate icons has the following advantages over image-based icons:

• Freedom of change in size without distortion, suitable for different resolutions and sizes of screens
• Free to modify colors
• Add a shadow Effect
• Other properties that support picture icons, such as transparency and rotation, etc.
• You can add properties such as Text-stroke and Background-clip:text, as long as the browser supports

use of font icons

Let's look at how the icons are used in the Sencha Touch program:

This "+" icon is actually the "&" character in the Pictos font.

(We write a div ourselves, and then write the style: before Pseudo-class style, can also display the icon, not only the button can be used)

several formats for font icons

Font icon file, there are 4 formats, we can open St project \touch\resources\themes\fonts\pictos, see inside there are the following 4 files:

Pictos-web.eot

Pictos-web.svg

Pictos-web.ttf

Pictos-web.woff

(EOT format, can only be used in IE9 and the following versions of IE browser.) The remaining 3 formats are used in modern advanced browsers. ）

Why use 3 different formats? This is mainly because different browsers support different font formats or do not fully support fonts in a certain format. We can look at the following three images, which indicate how much different browsers support these three font formats:

(above from can I use website)

font icon creation 1: Download font icons available on the Web

Let's start by introducing a few font icons for download sites:

1, Icomoon

2, Fontello

3, fontsaddict This is a font icon search engine, provides the font icon most

As for how to download, you can read my previous blog post: "Mobile development 7, Sencha touch icon use and customization"

Making a font icon 2: Turn your picture into a font iconSometimes we may not find the font icon we need on the Internet. It is estimated that most people are not art, do not design vectors, can use PS to draw a simple diagram, or download some PNG format icon files, how can we convert these PNG format images to font files?

1. Download Inkscape:

https://inkscape.org/en/download/

Note Download the corresponding operating system version, install after download

2. Open Inkscape, open file---Select your PNG image, as

3. Click on the selected layer, as

4, path, extract the bitmap outline, such as:

5, there is a dialog box, a total of 6 extract contour mode, generally with brightness cutoff or brightness steps, click on the bottom right corner of the "Update", you can see the effect:

Select the mode you want, click OK, and close the "Extract Bitmap Outline" dialog box.

6. There are two layers, a path layer, and a primitive diagram layer. Drag the path layer to the side, select the central Plains map layer, press DELETE to delete, and then drag the route layer back to the original location (Top toolbar x:0, y:0 position)

7, file-Save As, "Save type" select "Normal svg (*.svg)", save to the location you need.

(If you're using vector diagrams like illustrator, for example), you can simply design a vector diagram without the hassle. ）
(If you think the method above is complicated, here's an online tool Online SVG Image Converter, you can convert PNG to SVG)

8, convert SVG to TTF, Woff format.

Open the Icomoon website and click the "Import Icons" button in the top left corner to select the SVG file you made in the previous step.

This will be imported in. Then you just point to the bottom right corner "Generate Fonts" can download down, download down the ZIP package contains EoT, TTF, SVG, woff four format font.

Note: It is best to convert the original image to a transparent PNG format and preferably a monochrome chart, because the font icon is monochrome

(If you think the method above is complicated, here's an online toolOnline SVG Image Converter, you can convert PNG to SVG)

Welcome to Sencha Touch + Phonegap Group: 194182999

Joint Learning Communication (blogger qq:479858761)

[Phonegap+sencha Touch] Mobile development WebApp font icon production