图标 Icons

放置目录及引用

在样式表中定义图标字体名为 soicon

static
 ├── css //css样式
 │   ├── soicon //图标集
 │   │   ├── demo.css 
 │   │   ├── demo_index.html //查看所有图标的demo页面
 │   │   ├── iconfont.css //主图标样式文件
 │   │   ├── iconfont.js
 │   │   ├── iconfont.json
 │   │   ├── iconfont.ttf //图标字体文件
 │   │   ├── iconfont.woff
 │   │   ├── iconfont.woff2
 │   ├── base.css //基础样式文件
 │   ├── easy-plus.css //easyui 修正优化样式文件
 │   ├── socss.css // socss框架样式

 ...

引用

/* socss.css */
@import './soicon/iconfont.css?v=d59a0';

...

/* class以 icon- 开头的dom对象会被样式命中 */
[class^="icon-"], [class*=" icon-"] {
font-family: "soicon" !important;
/*font-size: 16px;*/
font-style: normal;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

...

页面中使用示例

<!-- 导航 -->
  <ul class="ul-sidenav">
      <li class="li-sidenav">
        <span class="s-sidenav" rel="buildNote.html"><em class="em-icon  icon-note"></em>施工日志</span>
      </li>
      <li class="li-sidenav">
        <span class="s-sidenav" rel="welcome.html"><em class="em-icon  icon-lifering"></em>安全管理</span>
      </li>
      <li class="li-sidenav">
        <span class="s-sidenav" rel="welcome.html"><em class="em-icon icon-cogs"></em>质量管理</span>
      </li>
</ul>

按钮

<!-- 带文字按钮 -->
<div class="item-group">
    <a class="btn btn-primary" href="#"><i class="icon icon-edit"></i> 编辑</a>
    <span class="btn"><i class="icon icon-del"></i>删除</span>
</div>

<!-- 纯图标按钮 -->
<div class="item-group pad-t20">
    <a class="btn btn-primary" href="#"><i class="icon icon-home"></i></a>
    <a class="btn" href="#"><i class="icon icon-spades"></i></a>
    <span class="btn"><i class="icon icon-leaf2"></i></span>
    <span class="btn"><i class="icon icon-eyedropper"></i></span>
</div>

图标 Icons

# 放置目录及引用

# 目录

# 引用

# 页面中使用示例

# 导航

# 按钮

文档目录

放置目录及引用

目录

引用

页面中使用示例

导航

按钮