【求解】一个很有意思的意外:font-awesome出现奇怪符号
今天做个登录页,本来一切都好好的。引入的CDN:vue代码:登录登录export default {name: 'login',data ()
·
今天做个登录页,本来一切都好好的。
引入的CDN:
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<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,没有遇到这种操作。
我打开了什么神奇的开关?
求解。
更多推荐
已为社区贡献1条内容
所有评论(0)