[英]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.