一行<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>

图片描述


small2
1.5k 声望95 粉丝

海潮迷