diff --git a/docs/markdown/en-US/icon.md b/docs/markdown/en-US/icon.md index 0506c74a9..c9d9a14b1 100644 --- a/docs/markdown/en-US/icon.md +++ b/docs/markdown/en-US/icon.md @@ -23,6 +23,36 @@ 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) + +```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'); +} + +.van-icon { + position: relative; + font-family: "iconfont", "vanIcon" !important; + font-size: 14px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.van-icon-success:before { + content: "\e626"; +} +``` + ### API | Attribute | Description | Type | Default | Accepted Values | diff --git a/docs/markdown/zh-CN/icon.md b/docs/markdown/zh-CN/icon.md index f2c545774..54d2bd0c5 100644 --- a/docs/markdown/zh-CN/icon.md +++ b/docs/markdown/zh-CN/icon.md @@ -23,6 +23,34 @@ Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件,如果想要使用 import 'vant/lib/vant-css/icon-local.css'; ``` +#### 自定义字体 +如果我们的Icon数量无法满足你的需求,可以用以下方法,保留原本Icon的情况下,增加更多你想要的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'); +} + +.van-icon { + position: relative; + font-family: "iconfont", "vanIcon" !important; + font-size: 14px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.van-icon-success:before { + content: "\e626"; +} +``` ### API