javascript - 字体真棒 CSS 伪元素
问题描述
我在一个项目中多次使用带有 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-awesome,您必须定义字体系列,并在内容中引入很棒的字体备忘单。
字体系列:
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>
推荐阅读
- rest - Express Rest API 服务器(后端)具有多种注册/登录技术。你如何保持用户不被复制和登录?
- python - 试图将 WORKING python 程序转换为 C++ 但不起作用?
- c# - 反编译源码中的\uE0001.\uE000是什么意思?
- apache-spark - 在主节点中创建 Spark Session
- matlab - 成对观察的箱线图
- google-app-engine - 如何修复 put() 与 Cloud Datastore ndb 模型(Google App Engine)的冲突
- spring-boot - 我们可以仅通过 Spring Boot 将 Redis 集群与主节点连接吗
- django - 我可以直接在 HTML 文件的顶层使用 Django 模板语言,即不带或标签吗?例子 -
- wireshark - 如何使用 tshark 从 .pcapng 文件中读取接口名称?
- python - 如何从 Django 中的中间件重定向 url?