实现侧边栏工具（2）使用图标字体方式

前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具（1）使用背景图片方式，可以看出这种方式的优缺点是

• HTML结构简单，容易阅读和理解

• 使用图片浏览器兼容性好，可以兼容ie6等低版本浏览器

• 缺点就是使用了大量的图片，对性能有一定的影响，并且不利于修改。

下面介绍一种使用图标字体来实现侧边栏工具条

HTML结构

html结构外层写一个toolbar类div
每一个内部工具条写一个a标签，内部包含两个span，一个span用来包含图标字体和具体的文字，另一个span用来包含二维码，如果不需要显示二维码，则只需一个span

<div class="toolbar">
    <a href="javascript:;" class="toolbar-item">
        <span class="tooblar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">App下载</span>
        </span>
        <span class="toolbar-layer toolbar-layer-app"></span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="tooblar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">快速回复</span>
        </span>
        
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="tooblar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">回到频道</span>
        </span>
        <span class="toolbar-layer toolbar-layer-channel"></span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="tooblar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">返回顶部</span>
        </span>
        
    </a>
</div>

CSS样式

首先需要去网上下载所需的字体图标样式，这类网站有很多，这里使用https://icomoon.io/app/#/select/font
网站具体界面如下

在selection中查看所选择的字体图标，选好之后，Generate Font
打包下载选择的字体图标

解压缩，查看文件目录结构，将其中的fonts文件夹和style.css样式文件复制到css文件夹下面

打开style.css，将里面的内容复制到自己的SCSS文件中

将其中的字体图标类复制到上面的html结构中

<i class="toolbar-icon icon-mobile"></i>
<i class="toolbar-icon icon-pencil"></i>
<i class="toolbar-icon icon-mail-reply"></i>
<i class="toolbar-icon icon-chevron-up"></i>

外部工具条总体样式固定定位

.toolbar{
    position: fixed;
    right: 10%;
    top: 50%;    
}

a标签样式

.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-width;
    height: $toolbar-height;
    margin-top: 10px;
    z-index: 1000;
//a标签hover时产生的效果
    &:hover{
        .toolbar-icon{
            top: -$toolbar-height;
        }
        .toolbar-text{
            top: 0;
        }
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

a标签的子元素，相对于a标签绝对定位，用来包含图标字体和文本字体，设置溢出隐藏

.tooblar-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-width;
    height: $toolbar-height;
    overflow: hidden;
}

图标字体样式

.toolbar-icon{
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-width;
    height: $toolbar-height;
    background-color: #6F6F6F;
    font-size: 24px;
    color: #fff;
    text-align: center;
    line-height: $toolbar-height;
    @include transition(top 0.5s);
}

文本字体样式

.toolbar-text{
    position: absolute;
    left: 0;
    top: $toolbar-height;
    width: $toolbar-width;
    height: $toolbar-height;
    background-color: #BE0201;
    padding-top: 8px;
    font-size: 14px;
    font-family: "微软雅黑";
    color: #fff;
    text-align: center;
    line-height: 1.2;
    @include transition(top 0.5s);

}

二维码公共部分设置

.toolbar-layer{
    cursor: pointer;
    position: absolute;
    right: $toolbar-width;
    bottom: -1px;
    width: 90px;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    transform: scale(0.01);
    z-index: 1000;
    transform-origin: right bottom;
    transition: all 1s;
    opacity: 0;
    filter: alpha(opacity=0);

}

.toolbar-layer-app{
    height: 112px;
    background-position: 0 -198px; 
}
.toolbar-layer-channel{
    height: 112px;
    background-position: 0 -198px
}