diff --git a/demo/colorui.wxss b/demo/colorui.wxss
index 15cc9d1..902cecb 100644
--- a/demo/colorui.wxss
+++ b/demo/colorui.wxss
@@ -148,7 +148,7 @@ item, chat, image {
   border-bottom-left-radius: 6rpx;
 }
 
-.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text {
+.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text[class*="icon"] {
   font-size: 52rpx;
   position: absolute;
   color: #aaa;
@@ -157,6 +157,10 @@ item, chat, image {
   bottom: 0;
   left: 0;
   right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 .grid.grid-square view, .grid.grid-square item {
@@ -1669,23 +1673,30 @@ avatar {
   background-size: cover;
   background-position: center;
   vertical-align: middle;
+  font-size: 0rpx;
+}
+avatar::first-letter ,avatar text::first-letter{
+  font-size: 40rpx;
 }
-
 avatar text {
   position: absolute;
   left: 50%;
   display: inline-block;
   transform-origin: 0 center;
-  transform: scale(0.75) translateX(-50%);
+  transform: scale(1) translateX(-50%);
+  font-size: inherit;
 }
 
+
 avatar.sm {
   width: 48rpx;
   height: 48rpx;
   line-height: 48rpx;
 }
-
-avatar > text {
+avatar.sm::first-letter ,avatar.sm text::first-letter{
+  font-size: 30rpx;
+}
+avatar > text[class*="icon"] {
   position: absolute;
   left: 50%;
   top: 0;
@@ -1695,15 +1706,15 @@ avatar > text {
   transform: scale(1.2) translateX(-50%);
 }
 
-avatar.sm > text {
+avatar.sm > text[class*="icon"] {
   transform: scale(0.75) translateX(-50%);
 }
 
-avatar.lg > text {
+avatar.lg > text[class*="icon"] {
   transform: scale(1.75) translateX(-50%);
 }
 
-avatar.xl > text {
+avatar.xl > text[class*="icon"] {
   transform: scale(2.2) translateX(-50%);
 }
 
@@ -1711,14 +1722,20 @@ avatar.lg {
   width: 90rpx;
   height: 90rpx;
   line-height: 90rpx;
+  font-size: 22rpx;
+}
+avatar.lg::first-letter ,avatar.lg text::first-letter{
+  font-size: 36rpx;
 }
-
 avatar.xl {
   width: 128rpx;
   height: 128rpx;
   line-height: 128rpx;
+  font-size: 24rpx;
+}
+avatar.xl::first-letter ,avatar.xl text::first-letter{
+  font-size: 40rpx;
 }
-
 avatar-group {
   direction: rtl;
   unicode-bidi: bidi-override;
@@ -2241,6 +2258,10 @@ bar .action>text[class*="icon"] {
   font-size: 36rpx;
 }
 
+bar .action>text[class*="icon"]::before {
+  vertical-align: 0.1em;
+}
+
 bar .action>text[class*="icon"]+text[class*="icon"] {
   margin-left: 0.5em;
 }
diff --git a/demo/pages/basics/avatar/avatar.wxml b/demo/pages/basics/avatar/avatar.wxml
index 0b8cc74..43424d1 100644
--- a/demo/pages/basics/avatar/avatar.wxml
+++ b/demo/pages/basics/avatar/avatar.wxml
@@ -10,8 +10,8 @@
     <text class='icon-title text-blue'></text>头像形状
   </view>
 </bar>
-<view class="padding">
-  <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
+<view class="padding">	
+  <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>	
   <avatar class="radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
 </view>
 <bar class="margin-top">
@@ -25,6 +25,18 @@
   <avatar class="lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
   <avatar class="xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
 </view>
+<view class="padding">
+  <avatar class="sm round margin-left bg-red" > orange</avatar>
+  <avatar class="round margin-left bg-red" >orange</avatar>
+  <avatar class="lg round margin-left bg-red" >orange</avatar>
+  <avatar class="xl round margin-left bg-red" >orange</avatar>
+</view>
+<view class="padding">
+  <avatar class="sm round margin-left bg-red" > 蔚蓝</avatar>
+  <avatar class="round margin-left bg-red" >蔚蓝</avatar>
+  <avatar class="lg round margin-left bg-red" >蔚蓝</avatar>
+  <avatar class="xl round margin-left bg-red" >蔚蓝</avatar>
+</view>
 <bar class="margin-top">
   <view class='action'>
     <text class='icon-title text-blue'></text>内嵌文字(图标)
diff --git a/template/colorui.wxss b/template/colorui.wxss
index 15cc9d1..902cecb 100644
--- a/template/colorui.wxss
+++ b/template/colorui.wxss
@@ -148,7 +148,7 @@ item, chat, image {
   border-bottom-left-radius: 6rpx;
 }
 
-.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text {
+.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text[class*="icon"] {
   font-size: 52rpx;
   position: absolute;
   color: #aaa;
@@ -157,6 +157,10 @@ item, chat, image {
   bottom: 0;
   left: 0;
   right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 .grid.grid-square view, .grid.grid-square item {
@@ -1669,23 +1673,30 @@ avatar {
   background-size: cover;
   background-position: center;
   vertical-align: middle;
+  font-size: 0rpx;
+}
+avatar::first-letter ,avatar text::first-letter{
+  font-size: 40rpx;
 }
-
 avatar text {
   position: absolute;
   left: 50%;
   display: inline-block;
   transform-origin: 0 center;
-  transform: scale(0.75) translateX(-50%);
+  transform: scale(1) translateX(-50%);
+  font-size: inherit;
 }
 
+
 avatar.sm {
   width: 48rpx;
   height: 48rpx;
   line-height: 48rpx;
 }
-
-avatar > text {
+avatar.sm::first-letter ,avatar.sm text::first-letter{
+  font-size: 30rpx;
+}
+avatar > text[class*="icon"] {
   position: absolute;
   left: 50%;
   top: 0;
@@ -1695,15 +1706,15 @@ avatar > text {
   transform: scale(1.2) translateX(-50%);
 }
 
-avatar.sm > text {
+avatar.sm > text[class*="icon"] {
   transform: scale(0.75) translateX(-50%);
 }
 
-avatar.lg > text {
+avatar.lg > text[class*="icon"] {
   transform: scale(1.75) translateX(-50%);
 }
 
-avatar.xl > text {
+avatar.xl > text[class*="icon"] {
   transform: scale(2.2) translateX(-50%);
 }
 
@@ -1711,14 +1722,20 @@ avatar.lg {
   width: 90rpx;
   height: 90rpx;
   line-height: 90rpx;
+  font-size: 22rpx;
+}
+avatar.lg::first-letter ,avatar.lg text::first-letter{
+  font-size: 36rpx;
 }
-
 avatar.xl {
   width: 128rpx;
   height: 128rpx;
   line-height: 128rpx;
+  font-size: 24rpx;
+}
+avatar.xl::first-letter ,avatar.xl text::first-letter{
+  font-size: 40rpx;
 }
-
 avatar-group {
   direction: rtl;
   unicode-bidi: bidi-override;
@@ -2241,6 +2258,10 @@ bar .action>text[class*="icon"] {
   font-size: 36rpx;
 }
 
+bar .action>text[class*="icon"]::before {
+  vertical-align: 0.1em;
+}
+
 bar .action>text[class*="icon"]+text[class*="icon"] {
   margin-left: 0.5em;
 }