28字体图标

1、字体图标（本库）

<div class="container">
    <div class="row">
        <div class="col">
            <!-- bootstrap本库字体：使用时需要fonts文件夹以及3.x版本 -->
            <span class="glyphicon glyphicon-heart" style="font-size: 5rem; color: #f00;"></span>
            <button class="btn btn-success" style="font-size: 3rem;">
                <span class="glyphicon glyphicon-star"></span> 陈学辉
            </button>
        </div>
    </div>

2、unicode引用

<!-- https://www.iconfont.cn/ -->
<!-- 添加入库->购物车->下载代码->打开文件里的iconfont demo
    ->五个文件（除了json的）放在一个新文件夹里->修改style里的引入地址->在span中加入class以及图形的unicode编码 -->
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('fonts/iconfont.eot');
            src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
                url('fonts/iconfont.woff2') format('woff2'),
                url('fonts/iconfont.woff') format('woff'),
                url('fonts/iconfont.ttf') format('truetype'),
                url('fonts/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <div class="row">
        <div class="col">
            <span class="iconfont" style="font-size: 5rem; color: red;">&#xe642;</span>
            <span class="iconfont" style="font-size: 5rem; color: red;">&#xe648;</span>
            <span class="iconfont" style="font-size: 5rem; color: red;">&#xe651;</span>
            <span class="iconfont" style="font-size: 5rem; color: red;">&#xe65e;</span>
        </div>
    </div>

3、fontclass引用

<link rel="stylesheet" href="css/iconfont.css"><!-- 引入css -->
<div class="row">
    <div class="col">
        <span class="iconfont icon-icon-test3" style="font-size: 5rem; color: green;"></span>
        <span class="iconfont icon-icon-test2" style="font-size: 5rem; color: green;"></span>
        <span class="iconfont icon-icon-test1" style="font-size: 5rem; color: green;"></span>
        <span class="iconfont icon-icon-test" style="font-size: 5rem; color: green;"></span>
    </div>
</div>

4、symbol（但是可能不支持颜色）

<script src="js/iconfont.js"></script><!-- 引入js文件 -->
<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style><!-- 复制网页上的，不需更改 -->
<div class="row">
    <div class="col">
        <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
            <use xlink:href="#icon-icon-test"></use>
        </svg>
        <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
            <use xlink:href="#icon-icon-test1"></use>
        </svg>
        <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
            <use xlink:href="#icon-icon-test2"></use>
        </svg>
        <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
            <use xlink:href="#icon-icon-test3"></use>
        </svg>
    </div>
</div>