浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。
旺道UI Icon 组件目前使用了 Font Awesome(旺道UI 2.2.0 中升级至 4.3.0),涵盖除部分国内社交网站图标以外的其他常见图标。
在 HTML 上添加添加 wd-icon-{图标名称} class。
<span class="wd-icon-qq"> QQ</span>
<span class="wd-icon-weixin"> Wechat</span>
LESS 用户可以调用 mixin 编写样式:
.wd-icon-font mixin 设置字体;content 设置为 Icon 名称对应的变量 content: @fa-var-{图标名称}。<span class="doc-icon-custom"> 新浪微博</span>
.doc-icon-custom {
&:before {
.wd-icon-font;
content: @fa-var-weibo;
}
}
字体图标目前引了 Staticfile CDN 上的文件(支持 HTTPS),可以自行替换:编译好的 CSS 中已经替换为本地文件。
@fa-font-path 覆盖默认的值,如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。//dn-staticfile.qbox.me/font-awesome/4.2.0/fonts/。.wd-icon-sm,放大 150%.wd-icon-md,放大 200%.wd-icon-lg,放大 250%默认大小
.wd-icon-sm
.wd-icon-md
.wd-icon-lg
<p><span class="wd-icon-home"></span> 默认大小</p>
<p><span class="wd-icon-home wd-icon-sm"></span> .wd-icon-sm</p>
<p><span class="wd-icon-home wd-icon-md"></span> .wd-icon-md</p>
<p><span class="wd-icon-home wd-icon-lg"></span> .wd-icon-lg</p>
在 Icon 上添加 .wd-btn-icon class。
如果需要设置 Icon Button 的颜色,可以添加以下 class:
.wd-primary.wd-secondary.wd-success.wd-warning.wd-danger<a href="" class="wd-icon-btn wd-icon-twitter"></a>
<a href="" class="wd-icon-btn wd-icon-facebook"></a>
<a href="" class="wd-icon-btn wd-icon-github"></a>
<a href="" class="wd-icon-btn wd-primary wd-icon-qq"></a>
<a href="" class="wd-icon-btn wd-secondary wd-icon-drupal"></a>
<a href="" class="wd-icon-btn wd-success wd-icon-shield"></a>
<a href="" class="wd-icon-btn wd-warning wd-icon-warning"></a>
<a href="" class="wd-icon-btn wd-danger wd-icon-youtube"></a>
注意:Chrome 和 Firefox 下, display: inline-block; 或 display: block; 的元素才会应用旋转动画。
<i class="wd-icon-spinner wd-icon-spin"></i>
<i class="wd-icon-refresh wd-icon-spin"></i>
<i class="wd-icon-circle-o-notch wd-icon-spin"></i>
<i class="wd-icon-cog wd-icon-spin"></i>
<i class="wd-icon-gear wd-icon-spin"></i>
v2.3 新增动画:
<i class="wd-icon-spinner wd-icon-pulse"></i>
FontAwesome 在绘制图标的时候不同图标宽度有差异, 添加 .wd-icon-fw 将图标设置为固定的宽度,解决宽度不一致问题(v2.3 新增)。
鼠标移到图标上会显示两个小按钮:
class: 复制 class 名称,用于可修改 DOM 结构的场景,如点击 copy 图标旁的 class 按钮复制结果为 wd-icon-copy;style: 复制 Icon 样式,用于无法修改 DOM 结构通过样式添加 Icon 的场景,如点击 copy 图标旁的 style 按钮复制结果为{
.wd-icon-font;
content: @fa-var-copy;
}
以酷派为代表的部分安卓手机自带浏览器、微信/QQ WebView 等用户代理无法正常显示 Icon Font,原因可能是这些用户代理无法正确处理伪元素 content 的五位数的 Icon Font 十六进制编码,详情参考 Iconfont 在移动端遇到问题的探讨,可以通过这个页面进行测试。
解决方式有两种:
<span> What a fuck.</span>
旺道UI 的定位是面向现代浏览器,虽然对 IE 8/9 这些浏览器提供了有限支持,但这都是在不改变基础架构、不耗费过多精力的前提下。安卓碎片化严重,更恶心的是一些厂商还随意修改浏览器内核,旺道UI 不可能做到全部兼容,也不可能为极个别的用户代理调整架构、耗费过多精力。
云适配内部有数千个网站在使用 旺道UI,截止目前还没有接到过图标不显示的反馈。显然,遇到这些问题的用户需要权衡处理这个问题的成本与收益。
v2.3 update:
有用户在评论中说以下写法可以解决图标不显示的问题,v2.3 中已经调整为以下写法,遇到过问题的用户可以测试一下。
/* 安卓手机端Icon不能正确显示的处理办法:*/
[class*='wd-icon-']:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
wd-icon-spin class. Check out the spinning icons example.