提交 7aa71895 编写于 作者: L liuxiaohang

fix: uni icon 样式

上级 98b96b71
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!-- CSSJSON.at_rules_values.compatibility --> <!-- CSSJSON.at_rules_values.compatibility -->
## 字体 ## 字体 @font
@font-face自定义字体示例: @font-face自定义字体示例:
```html ```html
...@@ -14,35 +14,35 @@ ...@@ -14,35 +14,35 @@
</style> </style>
``` ```
### 内置字体图标 uni-icon @uniicon ### 内置字体图标 uni-icon @uniicon
> HBuilderX4.33版本开始 app-android、app-ios平台支持内置字体图标 uni-icon > HBuilderX4.33版本开始 app-android、app-ios平台支持内置字体图标 uni-icon
内置 `uni-icon` 字体图标示例: 内置 `uni-icon` 字体图标示例:
```html ```html
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1;"> <scroll-view style="flex: 1;">
<!-- #endif --> <!-- #endif -->
<text style="font-family: uni-icon;font-size: 64px;">{{uniIcon}}</text> <text style="font-family: uni-icon;font-size: 64px;">{{uniIcon}}</text>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
export default { export default {
data() { data() {
return { return {
uniIcon: '\ue605' uniIcon: '\ue605'
} }
} }
} }
</script> </script>
``` ```
内置 `uni-icon` 包括以下图标: 内置 `uni-icon` 包括以下图标:
<div class="iconSample"> <div class="iconSample">
<div class="iconContainer"> <div class="iconContainer">
...@@ -162,13 +162,13 @@ ...@@ -162,13 +162,13 @@
.iconSample { .iconSample {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.iconContainer { .iconSample .iconContainer {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
display: flex; display: flex;
} }
.iconItem { .iconSample .iconItem {
width: 100px; width: 100px;
height: 150px; height: 150px;
align-items: center; align-items: center;
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.icon { .iconSample .icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
font-family: uni-icon; font-family: uni-icon;
...@@ -187,12 +187,12 @@ ...@@ -187,12 +187,12 @@
margin-bottom: 8px; margin-bottom: 8px;
display: block; display: block;
} }
.code { .iconSample .code {
font-size: 14px; font-size: 14px;
color: #f00; color: #f00;
display: block; display: block;
} }
.name { .iconSample .name {
font-size: 12px; font-size: 12px;
color: #000; color: #000;
display: block; display: block;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册