One Span

一行<span>标签实现一个小图标，更可以与<a>标签搭配形成导航栏（灵感来源于OneDIV网站）。

源码放在Github：https://github.com/Monkey626/...

Code

• 默认效果

<span class="icon-name"></span>

• 与<a>标签搭配

<div class="menu">
    <span class="icon-name"></span>
    <a href="">nav-name</a>
</div>

Example

E-mail

默认效果

<span class="mail"></span>

导航栏菜单效果

<div class="menu">
    <span class="ribbon"></span>
    <a href="">Ribbon</a>
</div>

Wifi

默认效果

<span class="wifi"></span>

导航栏菜单效果

<div class="menu">
    <span class="wifi"></span>
    <a href="">Wifi</a>
</div>

Eye

默认效果

<span class="eye"></span>

导航栏菜单效果

<div class="menu">
    <span class="eye"></span>
    <a href="">Eye</a>
</div>

Ribbon

默认效果

<span class="ribbon"></span>

导航栏菜单效果

<div class="menu">
    <span class="ribbon"></span>
    <a href="">Ribbon</a>
</div>

Arrow-left

默认效果

<span class="arrow-left"></span>

导航栏菜单效果

<div class="menu">
    <span class="arrow-left"></span>
    <a href="">Arrow-left</a>
</div>

Arrow-right

默认效果

<span class="arrow-right"></span>

导航栏菜单效果

<div class="menu">
    <span class="arrow-right"></span>
    <a href="">Arrow-right</a>
</div>

Arrow-top

默认效果

<span class="arrow-top"></span>

导航栏菜单效果

<div class="menu">
    <span class="arrow-top"></span>
    <a href="">Arrow-top</a>
</div>

Arrow-down

默认效果

<span class="arrow-down"></span>

导航栏菜单效果

<div class="menu">
    <span class="arrow-down"></span>
    <a href="">Arrow-down</a>
</div>

Search

默认效果

<span class="search"></span>

导航栏菜单效果

<div class="menu">
    <span class="search"></span>
    <a href="">Search</a>
</div>

OK

默认效果

<span class="ok"></span>

导航栏菜单效果

<div class="menu">
    <span class="ok"></span>
    <a href="">OK</a>
</div>

Remove

默认效果

<span class="remove"></span>

导航栏菜单效果

<div class="menu">
    <span class="remove"></span>
    <a href="">Remove</a>
</div>

Th-large

默认效果

<span class="th-large"></span>

导航栏菜单效果

<div class="menu">
    <span class="th-large"></span>
    <a href="">Th-large</a>
</div>

Th

默认效果

<span class="th"></span>

导航栏菜单效果

<div class="menu">
    <span class="th"></span>
    <a href="">Th</a>
</div>

Th-list

默认效果

<span class="th-list"></span>

导航栏菜单效果

<div class="menu">
    <span class="th-list"></span>
    <a href="">Th-list</a>
</div>

Clock

默认效果

<span class="clock"></span>

导航栏菜单效果

<div class="menu">
    <span class="clock"></span>
    <a href="">Clock</a>
</div>

Blackboard

默认效果

<span class="blackboard"></span>

导航栏菜单效果

<div class="menu">
    <span class="blackboard"></span>
    <a href="">Blackboard</a>
</div>

Calendar

默认效果

<span class="calendar"></span>

导航栏菜单效果

<div class="menu">
    <span class="calendar"></span>
    <a href="">Calendar</a>
</div>

Smile

默认效果

<span class="smile"></span>

导航栏菜单效果

<div class="menu">
    <span class="smile"></span>
    <a href="">Smile</a>
</div>

Loader

默认效果

<span class="loader"></span>

导航栏菜单效果

<div class="menu">
    <span class="loader"></span>
    <a href="">Loader</a>
</div>

Loader-animated

默认效果

<span class="loader-animated"></span>

导航栏菜单效果

<div class="menu">
    <span class="loader-animated"></span>
    <a href="">Loader-animated</a>
</div>