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

《One Span》

E-mail

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Wifi

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Eye

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Ribbon

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Arrow-left

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Arrow-right

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Arrow-top

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Arrow-down

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Search

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

OK

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Remove

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Th-large

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Th

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Th-list

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Clock

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Blackboard

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Calendar

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Smile

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Loader

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

Loader-animated

默认效果

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

《One Span》

导航栏菜单效果

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

《One Span》

    原文作者:small2
    原文地址: https://segmentfault.com/a/1190000006138525
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞