Method steps (code) for IconFont icon reference

The content of this article is about the method steps (code) of IconFont icon reference. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Front-end development will often use some icons. When the icons provided by ui girl cannot meet your needs, you can collect and generate your own business icon library on iconfont.cn and then use it.

1. Generate icon library code

First, search and find the icon you need, collect it into your shopping cart, in the shopping cart, you can add the selected icon Go to the project (if it doesn't exist, create a new one), and the subsequent resources/code generated

will be based on the project dimension.

Go to the project page you just selected and click the link "Generate Code". Codes for different introduction methods will be generated below. introduce.

2. Import

There are three import methods for you to choose from: SVG Symbol, Unicode and Font class. We recommend using SVG Symbol to import in modern browsers.

SVG Symbol

The introduction of SVG symbols is the mainstream icon introduction method for modern browsers in the future. The method is to preload symbols, introduce them where appropriate and render them as vector graphics. It has the following features:

1. Supports multi-color icons and is no longer limited by single-color icons

2. Through some techniques, it supports, like fonts, Adjust the style through font-size and color

3. Supports IE 9 and modern browsers

The steps are as follows:

• Switch to the Symbol tab and copy the address code generated by the project:

//at.alicdn.com/t/font_835630_0rudypqb4a.js

• Add the icon style code. If there are no special requirements, you You can directly reuse the style of the Ant Design icon

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

• Select the corresponding icon and get the class name, and apply it to the page

<svg>
    <use></use>
</svg>

You can also use the Icon.createFromIconfontCN({...}) method provided by the Ant Design icon component to use icons more conveniently. The usage method is as follows:

• Configure the project address , after creating the icon component

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'
});

export default IconFont;

• , it can be used as conveniently as using the component, and supports configuration styles

<iconfont></iconfont>

Unicode

This is the most original way, which requires three steps to complete the introduction:

• Copy the font library code generated by the project, you can create a new one Style files to place icon-related styles.

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg');
}

• Add the icon style code. If there are no special requirements, you can directly reuse the Ant Design icon style.

.iconfont {
  display: inline-block;
  font-style: normal;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    display: block;
    font-family: "iconfont" !important;  /* 注意与 font-face 中的匹配 */
  }
}

• Move the mouse to the icon you want to use in the project, click "Copy Code", and you will get the font encoding corresponding to the icon, which can now be imported directly Now:

<i></i>

Font Class

• Switch to the Font class tab and introduce the following generated css code at the head of the page:

//at.alicdn.com/t/font_835630_0rudypqb4a.css

If you don’t like the way tags are introduced, you can also directly copy the code in the link above into your style file. If you don’t like the class name generated by the website by default, you can rewrite this part of the code yourself, for example:

 - .icon-ali-pay:before { content: "\e66b"; }              // 修改前
 - .monitor-icon-alipay:before { content: "\e66b"; }       // 修改后

• At this time, you can choose to copy the code corresponding to the icon (which is the class name. If the class name is rewritten I have written it before, remember to use the modified one here), use it directly:

<i></i>

However, we recommend encapsulating it:

import React from 'react';

const BizIcon = (props) => {
  const { type } = props;
  return <i></i>;
};
export default BizIcon;

Now it can be used more conveniently:

<bizicon></bizicon>

Unicode and Font Class are essentially fonts. You can control the display of this icon through some font style attributes. At the same time, browser compatibility is very good, but multi-color icons are not supported.

Related recommendations:

iconfont-Use of vector icon font_html/css_WEB-ITnose

iconfont font icon and Detailed explanation of various css small icons

The above is the detailed content of Method steps (code) for IconFont icon reference. For more information, please follow other related articles on the PHP Chinese website!