start

For a front-end siege lion, working on a single project without a UI and keeping the page beautiful is a pain in the neck, and sometimes thinking about the page design and finding design resources takes longer than writing your own code, and it’s hard to find.

There are many factors that affect the appearance of a page. I think a set of beautiful and elegant font ICONS is a great way to improve the page.

And font ICONS are very easy to use. You don’t need to put an image into a project and reference a path like an image. It is really suitable for those who learn the front end to do the project alone, and the icon library has a large number of ICONS, you can always find what you want, the design cost is very low, compared with blind looking for pictures on the network, but also with watermark, it is really too easy to find. It’s really a design library.

Iconfont is a monochrome icon and a multicolor icon

A brief description of iconfont Alibaba vector icon library. Iconfont is a very powerful and rich icon content vector icon library, mainly in China, fast access, Chinese support friendly, has a large user group.

Unlike other icon libraries, iconFont not only supports traditional monochrome ICONS, but also multi-color ICONS, and multi-color ICONS have reached an order of magnitude, the choice is very large, beautiful and elegant. See how monochrome ICONS compare with multicolor ICONS.

Iconfont has three types of references: unicode, font class, and symbol.

See the official tutorial usage help for details

However, we will find that the official only says about the use of web side, does not say how small programs use multicolor icon, shouldn’t small programs use multicolor icon? You can use iconFont in uni-App. I’ll go into more detail later.

Iconfont – the use of tools

We need to convert the original iconFONT multicolor icon into a uni-app icon that can be used in the following steps:

  1. Download the icon library from your project to your local PC
  2. downloadiconfont-toolspackage
  3. withiconfont-toolsconversionMulticolor logo

Download icon Library

How to create a project and add ICONS to the project is not much discussed. We unzip the downloaded icon and go to the font file directory.

Install iconfont – tools package

This is a key step, this tool converts our downloaded multicolor ICONS into an icon library that uni-App can use. We recommend installing this package globally.

npm install -g iconfont-tools
Copy the code

After installing this package, we open CMD in the downloaded font file directory, and then execute this command, very important step, do not mistake the folder directory.

Execute the command

Then there will be a few prompts, you can change according to your needs, we directly enter, choose the default is good.

Then, we can do something about it. Take a look at the iconfont-reappingP catalog that has been created.

Use iconFONT multicolor ICONS in uni-app

To use these polychromatic ICONS in UNI-App, you only need to use the file iconfont-app.css, which we then add to the uni-App project.

Then import this file in app.vue:

We can then use it in our projects by adding a class name, a generic class name, t-icon, and a single icon specific class name, using the same method as font class.

Multicolor ICONS are colored, which is no more challenging than monochrome ICONS.

Change the style of multicolor ICONS

Do you know anything about “iconfont-reapping.css”

We can change the default style of the icon by changing the common class name. Then, how can we change one of the ICONS individually as needed?

We can override the default style by styling the class name where it is used, and unlike monochrome ICONS, multicolor ICONS are resized by width and height. Since the ICONS are square, we want to make sure that width and height are the same.

conclusion

Finally, let’s take a look at my multi-color iconFont library:

  • Little fake brother _ colorful _icon083

  • Little fake brother _ colorful _icon086

  • The file type

  • 001 personal page icon

  • The cat icon

Thank you for reading this article. I hope it was helpful. If you have any questions, please comment in the comments section.

Creation is not easy, I hope to support ❤️❤️.