We have been reconstructing the APP recently, and the designer, Wet Sister, sent us the designed UI. She said the ICONS were uploaded to iconfont. You can just download it and use it. Font ICONS are the most widely used form of icon design presentation in the front-end domain. Go Ollie to ！！！！！

What is a iconfont

Iconfont is a font that displays graphic ICONS. Because fonts are vectorized graphics, they are resolution-independent. They can be perfectly scaled at any resolution or ppi, unlike traditional bitmaps such as PNG and JPG, which may have jagged or blurred after magnification.

Why use iconfont

It has less capacity compared to image size, supports style modification (size, color), and is adaptable to multiple resolutions. There are plenty of iconFont resources available online.

First, I will sort out the font icon library on the market:

Fontawesome:

Lonicons:

Iconfont:

weather icons

Glyphicons:

The material design iconic:

themify icons

Second, the use of iconfont on the Web

Below, we specifically comb the use of iconfont. Here are three kinds of reference methods:

Unicode reference

Unicode is the original use of fonts on the web. It has the following features:

  • Best compatibility, support ie6+, and all modern browsers.
  • Support to dynamically adjust icon size, color and so on according to the font.
  • But because it is a font, it does not support multicolor. Use only monochrome ICONS on the platform, even if there are multi-colored ICONS in the project, the color will be automatically removed.

Note: the new version of IconFont supports multicolor ICONS. These multicolor ICONS will not be available in Unicode mode. Use symbol references if required

import './icon/iconfont.js' <i class="iconfont">&#x33; </i>Copy the code

The font – class reference

Font -class is a variant of Unicode, mainly to solve the problem of unicode writing is not intuitive, ambiguous semantics.

Compared to unicode usage, it has the following features:

  • Good compatibility, support ie8+, and all modern browsers.
  • It is more intuitive to write than Unicode. It’s easy to tell what the icon is.
  • Because you use class to define ICONS, you only need to change the Unicode reference in the class to replace the icon.
  • Multicolor ICONS are not supported, however, because they are essentially fonts.

The steps are as follows:

import './icon/iconfont.js'

<i class="iconfont icon-xxx"></i>
Copy the code

The symbol referenced

This is a completely new way of using it, and it’s the mainstream of the future, and it’s what the platform currently recommends. This usage actually makes a collection of SVG, which has the following characteristics compared to the above two:

  • Support for multi-color ICONS, no longer limited by monochrome.
  • Through a few tricks, support like fonts, through
  • font-size
  • color
  • To adjust the style.
  • Poor compatibility, support for IE9 +, and modern browsers.
  • Browsers render SVG with mediocre performance, not as good as PNG.

Step 1: Add generic CSS code (just once) :

<style type="text/css"> .icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

Step 2: Select the corresponding icon and get the class name, and apply it to the page:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
Copy the code

Use in React-native

It’s recommended to use react-native-vector-icons which will convert the font files into the corresponding iconSets that we’ll use in Rn.

Install the react – native – vector – the ICONS

npm i --save react-native-vector-icons

Integrate icon libraries in front end code

1. Copy the downloaded files to the resource folder

2. You need to configure ios separately to ensure that Build Phases’ Copy Bundle REsources contain the font files

3. Then modify info.plist, add Fonts provided by Application under information Property List, add Fonts provided by Application under Fonts provided by Application. At this point, ios is configured

4. Use the built-in iconSets

import createIconSet from ‘react-native-vector-icons/lib/create-icon-set’ import glyphMap from ‘./Iconfont.json’ const iconSet = createIconSet(glyphMap, ‘Iconfont’, ‘Iconfont.ttf’) export default iconSete xport const Button = iconSet.Button

5. Introduce in business code

import Icon from './Iconfont/Iconfont'
<Icon                
  name="icon-icon-xxx"     
  size={22}
  color={color}                
/>
Copy the code

4. Use it on the Android client

Android can directly use a single icon(SVG, PNG). You can also introduce fonts directly into the app:

Step 1: Select the icon you want to use from the Iconfont platform and download it locally. Copy the font files to the project Assets directory

Step 2: Open the file downloaded from iconfont platform, and open demo. HTML in the directory, find the HTML entity character code corresponding to the icon;

Step 3: Open res/values/strings. XML and add string values.

<string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af; </string>Copy the code

Step 4: Open activity_main. XML and add string values to TextView:

<TextView android:id=".. /.. /+id/like" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=".. /.. /string/icons" />Copy the code

Step 5: Specify text for TextView:

import android.graphics.Typeface;
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
    TextView textview = (TextView)findViewById(R.id.like);
    textview.setTypeface(iconfont);
}
Copy the code

5. Use it on Ios clients

The OS can use a single icon(SVG, PNG) directly. You can also introduce fonts directly into the app:

Step 1: Add the font file (.ttf) that you downloaded from the IconFont platform to the project;

Open the info.plist file and add a new Array type key. Set the key name to UIAppFonts (Fonts provided by Application) and add the file name of the font: “iconfont. TTF”

Step 2: Use IconFont:

UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
label.font = iconfont;
label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
[self.view addSubview: label];
Copy the code

Here are two things to note:

  • Create UIFont with font name, not file name;
  • For 8-bit Unicode characters, we can open Demo. HTML to find the Unicode code of the HTML entity corresponding to each icon. For example, the Unicode code of the HTML entity corresponding to “shop” is 0x3439 after conversion: \U00003439 replaces 0x with \U with a full length of 8 characters filled with zeros