diff --git a/docs/markdown/en-US/icon.md b/docs/markdown/en-US/icon.md index c9d9a14b1..f08ca6fd9 100644 --- a/docs/markdown/en-US/icon.md +++ b/docs/markdown/en-US/icon.md @@ -23,36 +23,27 @@ Icon uses font file in `yzcdn.cn` by default,if you want to use the local font import 'vant/lib/vant-css/icon-local.css'; ``` -#### Use custom font -Add more custom icon - -[Demo](https://github.com/qianzhaoy/vant--mobile-mall/blob/master/src/assets/scss/iconfont/iconfont.css) +#### Add custom iconfont ```css @font-face { - font-family: "iconfont"; - src: url('./iconfont.ttf') format('truetype'); -} - -@font-face { - font-family: "vanIcon"; - src: url(https://b.yzcdn.cn/zanui/icon/vant-icon-4c3245.ttf) format('truetype'); + font-family: 'custom-iconfont'; + src: url('./iconfont.ttf') format('truetype'); } .van-icon { - position: relative; - font-family: "iconfont", "vanIcon" !important; - font-size: 14px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: 'vant-icon', 'custom-iconfont' !important; } -.van-icon-success:before { - content: "\e626"; +.van-icon-extra:before { + content: '\e626'; } ``` +```html + +``` + ### API | Attribute | Description | Type | Default | Accepted Values | diff --git a/docs/markdown/zh-CN/icon.md b/docs/markdown/zh-CN/icon.md index 54d2bd0c5..4eb1f29e1 100644 --- a/docs/markdown/zh-CN/icon.md +++ b/docs/markdown/zh-CN/icon.md @@ -23,35 +23,28 @@ Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件,如果想要使用 import 'vant/lib/vant-css/icon-local.css'; ``` -#### 自定义字体 -如果我们的Icon数量无法满足你的需求,可以用以下方法,保留原本Icon的情况下,增加更多你想要的Icon +#### 自定义图标 +如果需要在现有 Icon 的基础上使用更多图标,可以引入你需要的 iconfont 对应的 ttf 文件和样式,之后就可以在 Icon 组件中直接使用 -[Demo地址](https://github.com/qianzhaoy/vant--mobile-mall/blob/master/src/assets/scss/iconfont/iconfont.css) ```css @font-face { - font-family: "iconfont"; - src: url('./iconfont.ttf') format('truetype'); -} - -@font-face { - font-family: "vanIcon"; - src: url(https://b.yzcdn.cn/zanui/icon/vant-icon-4c3245.ttf) format('truetype'); + font-family: 'custom-iconfont'; + src: url('./iconfont.ttf') format('truetype'); } .van-icon { - position: relative; - font-family: "iconfont", "vanIcon" !important; - font-size: 14px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: 'vant-icon', 'custom-iconfont' !important; } -.van-icon-success:before { - content: "\e626"; +.van-icon-extra:before { + content: '\e626'; } ``` +```html + +``` + ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 |