我在项目上几次使用JavaScript的Font Awesome SVG。现在,我正在尝试创建一个按钮,以便将鼠标悬停在该按钮上时,会在指向右侧的文本右侧显示一个箭头图标。当按钮悬停在上方时,图标应位于空白方块处,并且图标与文本一起出现在左侧。
使用
display:none
摆脱了按钮文本右侧的空白图标。
如何使图标显示在空白方块中?
这是代码
window.FontAwesomeConfig = {
searchPseudoElements: true
}
.fa-arrow-right:before {
font-family: 'Font Awesome 5 Solid';
content: "\f061";
font-weight: 900;
}
.btn-4 {
border-radius: 50px;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
}
.btn-4:active {
border-color: #17954c;
color: #17954c;
}
.btn-4:hover {
background: #24b662;
}
.btn-4:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-4:active:before {
color: #17954c;
}
/* Button 4a */
.btn-4a:before {
left: 130%;
top: 0;
}
.btn-4a:hover:before {
left: 80%;
}
/* Button 4b */
.btn-4b:before {
left: -50%;
top: 0;
}
.btn-4b:hover:before {
left: 10%;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<div class="container mw-100 mx-auto margin-top-70 purple-background">
<div class="row">
<div class="col-8" id="forum">
<h2 class="text-center margin-top-40">Join the Book Club</h2>
<p class="feature-text">What are you reading? Share the book love over on the forum</p>
</div>
<div class="col-4">
<div class="margin-top-60">
<button class="btn btn-4 btn-4a fa-arrow-right">Join Us</button>
</div>
</div>
</div>
</div>
我已截屏以说明问题buttons和buttons on hover
最佳答案
要使用真棒字体,您必须定义字体系列,并在内容中引入真棒字体备忘单。
字体系列:
font-family: FontAwesome;
内容:
content: '/f2bb' // exemple
备忘单-https://fontawesome.com/cheatsheet
h1 {
margin: 25px auto;
font-size: 40px;
text-align: center;
font-family: sans-serif;
}
.box {
width: 150px;
height: 150px;
background-color: #CD5C5C;
margin: 0 auto;
position: relative;
}
.box::after {
content: "\f0fc";
font-family: FontAwesome;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<head>
<meta charset="UTF-8">
<title>Font Awesome With Pseudo-Elements</title>
<!-- Font Awesome 4.6.3 CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<h1>Font Awesome with Pseudo-Elements</h1>
<div class="box"></div>
</body>
关于javascript - Font Awesome CSS伪元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50589416/