字体图标是3.X的内容，到了4.x的时候，已经被拿掉了，但是它比较重要，我们还是有必要学习的。
    这里字体图标就是说把那些图标做成字体，我们就可以像使用字体一样，我们怎么去设置字体，我们就可以怎么设置这个小图标。这里要注意的是我们的字体图标依托于字体文件我们就需要创建一个fonts文件。我们在3.X中下载Bootstrap文件里面有fonts文件，我们就可以引用。
    其中4.x中，我们就可以外部移入，用阿里巴巴里面的iconfont就可以
    网站： https://www.iconfont.cn/

    1.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    2.         integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    3.     <link rel="stylesheet" href="css/iconfont.css">
    4.     <script src="js/iconfont.js"></script>
    5.     <style>
    6.         @font-face {
    7.             font-family: 'iconfont';
    8.             src: url('fonts/iconfont.eot');
    9.             src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    10.                 url('fonts/iconfont.woff2') format('woff2'),
    11.                 url('fonts/iconfont.woff') format('woff'),
    12.                 url('fonts/iconfont.ttf') format('truetype'),
    13.                 url('fonts/iconfont.svg#iconfont') format('svg');
    14.         }
    16.         .iconfont {
    17.             font-family: "iconfont" !important;
    18.             font-size: 16px;
    19.             font-style: normal;
    20.             -webkit-font-smoothing: antialiased;
    21.             -moz-osx-font-smoothing: grayscale;
    22.         }
    24.         .icon {
    25.             width: 1em;
    26.             height: 1em;
    27.             vertical-align: -0.15em;
    28.             fill: currentColor;
    29.             overflow: hidden;
    30.         }
    31.     </style>
    32. </head>
    34. <body>
    35.     <!-- https://www.iconfont.cn/ -->
    36.     <div class="container">
    37.         <div class="row">
    38.             <div class="col">
    39.                 <span class="glyphicon glyphicon-heart" style="font-size: 5rem; color: #f00;"></span>
    40.                 <button class="btn btn-success" style="font-size: 3rem;">
    41.                     <span class="glyphicon glyphicon-star"></span> 陈学辉
    42.                 </button>
    43.             </div>
    44.         </div>
    46.         <div class="row">
    47.             <div class="col">
    48.                 <span class="iconfont" style="font-size: 5rem; color: red;">&#xe642;</span>
    49.                 <span class="iconfont" style="font-size: 5rem; color: red;">&#xe648;</span>
    50.                 <span class="iconfont" style="font-size: 5rem; color: red;">&#xe651;</span>
    51.                 <span class="iconfont" style="font-size: 5rem; color: red;">&#xe65e;</span>
    52.             </div>
    53.         </div>
    54.         <div class="row">
    55.             <div class="col">这是第二种引入方式：就是需要引入css，之后添加class
    56.                 <span class="iconfont icon-icon-test3" style="font-size: 5rem; color: green;"></span>
    57.                 <span class="iconfont icon-icon-test2" style="font-size: 5rem; color: green;"></span>
    58.                 <span class="iconfont icon-icon-test1" style="font-size: 5rem; color: green;"></span>
    59.                 <span class="iconfont icon-icon-test" style="font-size: 5rem; color: green;"></span>
    60.             </div>
    61.         </div>
    62.         <div class="row">
    63.             <div class="col">
    64. 第三中引入方式：全新的引入方式，用的是svg，跟我们的字体图标没有什么关联了，
    65. 通过svg画这个小图标，未来的主流方式，这时候就需要用到js文件了，iconfont.js，放到对应的js文件中，
    66. 然后在头部用script标签，路径引入进来，然后载来一个icon的css代码；不支持颜色调整
    67.                 <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
    68.                     <use xlink:href="#icon-icon-test"></use>
    69.                 </svg>
    70.                 <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
    71.                     <use xlink:href="#icon-icon-test1"></use>
    72.                 </svg>
    73.                 <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
    74.                     <use xlink:href="#icon-icon-test2"></use>
    75.                 </svg>
    76.                 <svg class="icon" aria-hidden="true" style="font-size:5rem; color:blue">
    77.                     <use xlink:href="#icon-icon-test3"></use>
    78.                 </svg>
    79.             </div>
    80.         </div>
    81.     </div>
    82. </body>