[英]Font Awesome CSS Pseudo-elements
我在项目上几次使用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>
要使用真棒字体，您必须定义字体系列，然后在内容中引入真棒字体备忘单。
字体系列：
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>
除了class fa-arrow-right还添加了fa类。
确保删除已应用的额外规则。
.fa-arrow-right:before {
font-family: 'Font Awesome 5 Solid';
content: "\f061";
font-weight: 900;
}
fa类将为您完成所有这一切。
希望能有所帮助。
Silktide Cookie许可3.0.3与使用CSS伪元素的Font Awesome 5.0.2冲突
[英]Silktide cookie consent 3.0.3 conflict with Font Awesome 5.0.2 using CSS Pseudo-elements
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.