《CSS》iconfont使用案例。并结合 position: fixed定位导航栏的位置，导航栏内又可以使用弹性布局display：flex对各个子级div布局。便捷快速。

一、css代码

 .navigation{
    position: fixed;  /*相对于整个窗口定位*/
    height: 45px;
    width: 100%;
    z-index: 3;
    left: 0px;  /*距离设备左侧0距离*/
    bottom:0px;  /*距离设备底部0距离*/
    z-index: 3;  /*层级设高一点就可以了*/
}

二、导航栏可以使用弹性布局display：flex方便快速

        父级div使用display:flex属性，子级div因为都是块级元素会每一个div占据一行，这时经过父级使用display:flex属性弹性布局后所有的div都会显示在同一行上了，而这种方法非常适合于在一个大div中要显示装下多个小div在同一行时使用。

        显示到同一行后再使用其他属性就可以轻松布局，常用几个属性。

.fatherDiv{
    display:flex;
    justify-content: left;
    align-items: center;
    ​​​​​​​flex-direction: column;
}

三、 小案例如下：底部栏有四个小div，通过弹性布局很简单。同时结合iconfont的Symbol 引用方法实现该例子。

iconfont准备工作：

1、到阿里巴巴矢量图标库下载想要的图标

iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/

（1）把图标添加入库：

（2）再到库里面选择下载代码，保存到项目目录里面

 2、项目中部署配置

（1）在项目中引用下载后的 iconfont.js 文件

 <script src="font/font_cthk7l1hy8u/iconfont.js"></script>

 （2）添加css默认代码

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

（3）在html中尽情使用图标吧

 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pinglun"></use> </svg>

如何使用指定的那一个图标呢？？只需要修改id就可以了

 那么这个id又是在哪里看的那？？在你下载的文件里面有个 demo_index.html 网页

小案例全部代码：

 HTML代码：

<div class="navColleShare">
    <div class="view">
        <input type="text" name="replycontent" placeholder="说两句...">
    </div>
    <div class="reply">
        <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-pinglun"></use> </svg>
    </div>
    <div class="collect" id="collect">
        <svg class="icon"  aria-hidden="true"> <use xlink:href="#icon-shoucang"></use> </svg>
    </div>
    <div class="share">
        <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fenxiang"></use> </svg>
    </div>
</div>

css代码：

/*.icon是使用iconfont的默认css初始化样式*/
.icon {
    width: 1.5em; height: 1.5em;/*iconfont的大小*/
    vertical-align: -0.15em;/*设置行内元素的垂直对齐方式，只对行内元素、行内块元素和表格单元格元素生效，块级无效，-0.15表示该字体顶部距离基线的距离*/
    fill: currentColor;
    overflow: hidden;
}
#icon-shoucang_shixin {
    color: red;
}
.navColleShare{
    background-color:#f8f8f8 ;
    border-top: 1px solid #f8f8f8;
    position: fixed;/*固定住div，上下滑动也不变位置*/
    height: 45px;
    width: 100%;
    z-index: 3;
    left: 0px;/*相对浏览器窗口的左边为0*/
    bottom:0px;/*相对浏览器窗口的底部为0*/
    display: flex;/*父级div设置为弹性布局，子级div就在同一行了*/
    justify-content: left;
    align-items: center;/*垂直居中*/
    /*border: 1px solid red;*/
}
.view{
    width: 55%;
    /*border: 1px solid red;*/
    margin-left: 20px;
    margin-right: 5px;
    /*border: 1px solid red;*/
}
.view input{
    height: 30px;
    border-radius: 20px;
    border: none;
    background-color:#eee;
    text-indent: 1em;
    width: 90%;
}
.reply,.collect,.share{
    width: 12%;
    /*border: 1px solid red;*/
}

        iconfont一共有三种使用方法，我使用的是iconfont的Symbol 引用方法，该方法只需引入iconfont.js文件，并在css样式中写几句比写的代码就可以了，在html中使用svg标签并在官网下载的iconfont中有每一个图标的id。对应使用即可，还挺好用的。

        关键这个还可以自定义图标的大小和颜色。