当前位置:网站首页>Use Alibaba icon in uniapp
Use Alibaba icon in uniapp
2022-07-06 08:05:00 【So Lanxun】
List of articles
Preface
In the use of uniapp
In the process of developing the project , The use of icons can be said to be daily operations , Even 80% of the pages will use , And if you use ui Frame words , The frame itself will also have its own icon , However, these icons are difficult to meet the demand , The following is the use of Alibaba icon .
Find the icon you need
- Add the icons you need to use to the shopping cart or collect them
- Click on the shopping cart icon in the upper right corner , Add the selected icon to the project
- You need to log in , You can baidu yourself
Download to local
After downloading to local
- You can click on the
demo_index.html
see , There are ways to use .
Page usage
Copy all the downloaded files into the project , It is recommended to put it in the folder static/iconfont
Next , You can copy all , You can also copy only iconfont.css
and iconfont.ttf
Two documents .
To create local css file
- stay
common/css
Create under filefont-icon.css
file , This is to configure and reference Alibaba's icon , The code is as follows : - hold iconfont.css Copy the contents of this file , Copy .iconfont The following style is enough , The above introduction does not need to be copied .
- Some friends may need to add
https
, But now the authorities have handled it , So there's no need to , If you can't visit, please add at last .
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src:url('[email protected]/static/iconfont/iconfont.ttf') format('truetype');
}
.icon {
color: #999;
font-family: uniicons;
font-size: 42upx;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
// The following , hold iconfont.css Copy the contents in , Copy .iconfont The following style is enough .
app.vue Introduction in
Page using
demo_index.html
There are corresponding icons in- Use... In the page
demo_index.html
Inside classiconfont
Switch toicon
that will do , Because you arefont-icon.css
The definition is called this , In order to distinguish, you can also use the same or customized name .
<span class="icon"></span>
<span class="icon icon-xxx"></span>
Used in the navigation bar
- Select the icon , Download to local without creating css File to introduce , It can be used directly .
- The use of the navigation bar is the same , Follow uniapp Just come to the official website .
- But the online part is also added to the introduction
https
, That should be the previous version , Not now , Debug and use according to normal steps , Finally, it can't be used , Try addinghttps
The way to . - In the code
text
Value , staydemo_index.html
Can be found in , Replace the previous symbol with\u
that will do , Remember that there is no semicolon behind
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue600",
"fontSrc": "/static/iconfont/iconfont.ttf",
"float": "right",
"key": 1
},
{
"text": "\ue648",
"fontSrc": "/static/iconfont/iconfont.ttf",
"float": "right",
"key": 2
}
]
}
}
Summary
- Although the article is long , It's not as simple as others , However, the use process is like this , It is also convenient for you to customize various icons
- How to use it , In fact, there are official websites , Please note that the development is still based on the official
- This article is to guide and comb , There are many ways , If you think it is applicable
边栏推荐
- 23. Update data
- C语言自定义类型:结构体
- The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
- The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
- Introduction to number theory (greatest common divisor, prime sieve, inverse element)
- ESP系列引脚说明图汇总
- Nft智能合约发行,盲盒,公开发售技术实战--拼图篇
- [t31zl intelligent video application processor data]
- JS select all and tab bar switching, simple comments
- 使用 BR 备份 TiDB 集群数据到兼容 S3 的存储
猜你喜欢
Résumé des diagrammes de description des broches de la série ESP
[research materials] 2021 live broadcast annual data report of e-commerce - Download attached
将 NFT 设置为 ENS 个人资料头像的分步指南
How to prevent Association in cross-border e-commerce multi account operations?
C语言自定义类型:结构体
A Closer Look at How Fine-tuning Changes BERT
24. Query table data (basic)
Wireshark grabs packets to understand its word TCP segment
Inspiration from the recruitment of bioinformatics analysts in the Department of laboratory medicine, Zhujiang Hospital, Southern Medical University
[redis] Introduction to NoSQL database and redis
随机推荐
Convolution, pooling, activation function, initialization, normalization, regularization, learning rate - Summary of deep learning foundation
Tidb backup and recovery introduction
Secure captcha (unsafe verification code) of DVWA range
DataX self check error /datax/plugin/reader/_ drdsreader/plugin. Json] does not exist
2.10transfrom attribute
PHP - Common magic method (nanny level teaching)
[nonlinear control theory]9_ A series of lectures on nonlinear control theory
Flash return file download
Data governance: misunderstanding sorting
ESP系列引脚说明图汇总
数据治理:数据质量篇
Remote storage access authorization
Launch APS system to break the problem of decoupling material procurement plan from production practice
What is the use of entering the critical point? How to realize STM32 single chip microcomputer?
珠海金山面试复盘
Epoll and IO multiplexing of redis
数据治理:元数据管理篇
Erc20 token agreement
Position() function in XPath uses
Data governance: Data Governance under microservice architecture