uniapp custom top icon

Replace the top navigation bar icon

Insert picture description here

Configuration items in page.json

{
    
    
            "path": "pages/my/index",
            "style": {
    
    
                "app-plus": {
    
    
                    "titleNView": {
    
    
                        "buttons": [{
    
    
                                "text": "\ue601",
                                "fontSrc": "/static/iconfont.ttf",
                                "fontSize": "18px",
                                "float": "left"
                            },
                            {
    
    
                                "text": "\ue606",
                                "fontSrc": "/static/iconfont.ttf",
                                "fontSize": "18px"

                            }
                        ]
                    }
                }
            }
        },

First of all, we have to go to the Ali icon library and choose the icon we like or need

Insert picture description here
Then add it to the shopping cart, click the download code in the shopping cart. After the
Insert picture description here
download is completed and unzipped, drop the ttf file in the folder to static and
then we open the iconfont.css file in the editor. The
following field'\e6b3' is us Required unicode encoding
Insert picture description here
**Finally fill in the encoding of the corresponding icon in the configuration item of page.json as text, and it needs to be written in the format of'\u++++'**

Example:
\e000********************** \ue000
\e123******************** ** \ue123
\e666********************** \ue666

fontSrc----------Introduce ttf file
text---------------encoding

Guess you like

Origin blog.csdn.net/qq_44977477/article/details/105491664