preface

Nowadays, mobile devices have numerous resolutions. Traditional scalar ICONS have to be exported to 1x, 2x and 3x graphs respectively to adapt to high resolution devices. This undoubtedly increases the workload of both the designer and the client. Vector graph has great advantage in icon because of its lossless scaling.

Iconfont is launched by Ali, powerful and rich icon content vector icon library, vector icon download, online storage, format conversion and other functions, almost become the fact of the standard vector icon library.

Each Iconfont project can generate a remot.css file, for example, //at.alicdn.com/t/font_883452_bqb4vsc7km8.css. You can check out the tutorial on how to generate.css files.

The normal process for using Iconfont is to introduce a style file in the HEAD tag of HTML and then invoke the icon through the class name

<html>
    <head>
        <link href="//at.alicdn.com/t/font_883452_bqb4vsc7km8.css" />
    </head>
    <body>
        <! -- This is an icon named Plus -->
        <i class="iconfont icon-plus"></i>
    </body>
</html>
Copy the code

Unfortunately, applets don’t support importing external CSS files, so I scoured the web and couldn’t find the correct Iconfont in applets.

This article, based on my practical experience, is the simplest way I can find to use Iconfont in small programs.

The introduction of

Although applets do not support the introduction of external stylesheets,.wxss files are essentially.css files, so we can save Iconfont’s stylesheets locally to.wxss.

  1. Download at.alicdn.com/t/font_883452_bqb4vsc7km8.css to /iconfont. WXSS and import it in app.wxss

    @import "/iconfont.wxss";
Copy the code

  2. Used in.wxml files

    <text class="iconfont icon-plus"></text>
Copy the code

You should now be able to see your desired icon in the developer tools.

After solving the basic usage problems, we found that the.iconfont and.icon-Plus introduced in app.wxss do not work in custom components, because applets have separate class scopes. Therefore, you need to use iconFont in any component that needs it. Introduce iconfont. WXSS respectively.

componentization

If you’ve read my previous articles, you know I hate redundant code. Custom components are a solution to repeated introductions.

To define aiconfontcomponent

  • iconfont.wxss

    Import the downloaded Iconfont stylesheet

    @import "/iconfont.wxss"
Copy the code

  • iconfont.js

    Declare component parameters

    Component({
  	properties: {
    	icon: String,}})Copy the code

  • iconfont.wxml

    <text class="iconfont icon-{{icon}}"></text>
Copy the code

Outside calls

  • page.json

    Refer to the component

    {
    "usingComponents": {
        "iconfont": "path/to/iconfont"}}Copy the code

  • page.wxml

    <iconfont icon="plus"></iconfont>
Copy the code

Afterword.

Now that you have a powerful component, you should have no trouble handling any project on Iconfont. But for now, you can’t control the font size of the iconFont component externally. We’ll talk about this in the next article. Until then, you can use Minapp-iconFont for full features.

Focus on me, not just small programs.