CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

Icon


旺道UI Icon 组件目前使用了 Font Awesome(旺道UI 2.2.0 中升级至 4.3.0),涵盖除部分国内社交网站图标以外的其他常见图标。

使用方法

添加 Class

在 HTML 上添加添加 wd-icon-{图标名称} class。

QQ Wechat
<span class="wd-icon-qq"> QQ</span>
<span class="wd-icon-weixin"> Wechat</span>

使用 Mixin

LESS 用户可以调用 mixin 编写样式:

  1. 在要设置 Icon 的元素里调用 .wd-icon-font mixin 设置字体;
  2. 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 中已经替换为本地文件。

  • 使用 LESS: 通过设置变量 @fa-font-path 覆盖默认的值,如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。
  • 直接使用 CSS: 查找替换 //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 button

在 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 新增)。

  • QQ
  • Skype
  • GitHub
  • Amex

复制图标

鼠标移到图标上会显示两个小按钮:

  • 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 在移动端遇到问题的探讨,可以通过这个页面进行测试。

解决方式有两种:

  • 将 Icon Font 编码限制在 4 位:旺道UI 直接使用 Font Awesome,不可能去调整近 500 个图标的编码。
  • 将 Icon Font 的编码直接以内容的形式写进 HTML
 What a fuck.
<span>&#xf09b; 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;
} 

所有图标列表

Font Awesome 4.3 新增字体(旺道UI 2.2 中搭载)

40 New Icons in 4.2

Web Application Icons

File Type Icons

Spinner Icons

These icons work great with the wd-icon-spin class. Check out the spinning icons example.

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.

Medical Icons