字体真棒CSS伪元素
[英]Font Awesome CSS Pseudo-elements
问题描述
I am using Font Awesome SVG with JavaScript a few times on a project. 
我在项目上几次使用JavaScript的Font Awesome SVG。 Now I am trying to create a button so when it is hovered over an arrow icon appears to the right of the text pointing to the right. 现在，我试图创建一个按钮，以便将其悬停在指向右侧的文本右侧时，会出现一个箭头图标。 When the button is hovered over there is just a blank square where the icon should be and the icon is appearing on the left with the text. 当按钮悬停在上方时，图标应位于空白方块处，并且图标与文本一起出现在左侧。
Using 使用
display:none
got rid of the blank icon on the right of the button text. 摆脱了按钮文本右侧的空白图标。
How do I make the icon appear in the blank square? 如何使图标显示在空白方块中？
This is the code 这是代码
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>
I have taken screenshots to illustrate the problem buttons and buttons on hover 我已截屏以说明问题按钮和悬停按钮
2 个解决方案
解决方案1
0 2018-05-29 17:04:55
To use font-awesome you have to define the font-family and in the content introduce awesome font cheatsheet. 要使用真棒字体，您必须定义字体系列，然后在内容中引入真棒字体备忘单。
Font-family: 字体系列：
font-family: FontAwesome;
Content: 内容：
content: '/f2bb' // exemple
Cheatsheet - https://fontawesome.com/cheatsheet 备忘单-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>
解决方案2
-1 2018-05-29 17:11:16
Along with the class fa-arrow-right also add the class fa . 除了class fa-arrow-right还添加了fa类。
Make sure you remove the extra rules that you've applied. 确保删除已应用的额外规则。
.fa-arrow-right:before {
font-family: 'Font Awesome 5 Solid';
content: "\f061";
font-weight: 900;
}
The fa class will do all this for you. fa类将为您完成所有这一切。
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.