【求解】一个很有意思的意外：font-awesome出现奇怪符号

今天做个登录页，本来一切都好好的。

引入的CDN：

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

vue代码：

<template>
  <div class="login">
    <div class="input-group">
        <!-- v-if和v-else实现不同样式转换 -->
        <span class="spanfont" v-if="username"><i class="fa fa-user"></i></span>
        <span v-else><i class="fa fa-user"></i></span>
        <input type="text" class="username" placeholder="用户名" v-model="username">
        <!-- v-bind实现不同样式转换 -->
        <span class="fa fa-lock" v-bind:class="{'spanfont':password}"></span>
        <input type="password" class="password" placeholder="密码" v-model="password">
        
        <button class="loginbtn1" v-if="username&&password">登录</button>
        <button class="loginbtn" v-else>登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
    box-sizing: border-box;
    margin:0 auto;
    /* font-family:"微软雅黑"; */
}
.input-group{
    width:300px;
}
.input-group .username,.password{
    width:100%;
    height:30px;
    margin:3px auto;
    padding-left:30px;
    padding-right:10px;
    /* border:none; */
    outline:none;
    top:0;
    right:0;
}
.auto{
    width:80%;
    margin:auto;
    font-size: 12px;
    text-align: center;
}
.input-group .rember,.autologin{
    text-align: justify;
}

.input-group span{
    width:30px;
    height: 30px;
    margin:3px auto;
    line-height:30px;
    text-align: center;
    position: absolute;
}
.spanfont{
    color:#009FE9;
    text-shadow:0 0 10px #99ffff;
}

button{
    margin-top:10px;
    border:none;
    outline: none;
    cursor: pointer;
}
.loginbtn{
    background-color:#999999;
    color:#ffffff;
    margin:10px 50px 0 50px;
    width:200px;
    height:30px;
    transition: .3s;
}
.loginbtn1{
    background-color:#009FE9;
    color:#ffffff;
    margin:10px 50px 0 50px;
    width:200px;
    height:30px;
    box-shadow:0 0 10px #0099ff;
    transition: .3s;
}
</style>

fa-user还是那个fa-user，fa-lock还是那个fa-lock。

不小心全局加了个字体，于是一切都变了。

*{
    box-sizing: border-box;
    margin:0 auto;
    font-family:"微软雅黑";
}

事情变得一发不可收拾......这个笑脸哪儿来的？？？底下那是啥？

后来我玩得不亦乐乎。得出不是很全面的结论：

 font-family换成其他（我换得不多），也是这个现象。

目前只发现这俩font-awesome图标可以变形，绝大多数只能变个框：

以上一个是fa-apple，一个是fa-car。

百思不得其解。以前也用过font-awesome，没有遇到这种操作。

我打开了什么神奇的开关？

求解。