我正在尝试使用字体awesome创建一个箭头,它将位于我的文本右侧的一个按钮(div
)。
但是,箭头没有显示。我不确定这是我的@font-face
中的错误还是我实现字体的方式中的错误。
@font-face {
font-family: "FontAwesome";
src: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/fa-regular-400.svg) format("svg");
}
.formLink {
text-align: center;
display: inline-block;
margin: 0 0 88px;
transition: all 0.25s ease;
width: 250px;
background: linear-gradient(to right, #e82171, #ef3e36);
padding: 24px 1.2em;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
font-size: 18px;
color: #fff;
text-decoration: none;
font-family: 'GeomanistRegular', sans-serif;
cursor: pointer;
}
<div class="formLink">Download now <i class="fas fa-arrow-right" style="font-family: 'FontAwesome';"></i></div>
style of arrow I'm trying to use。
任何帮助都将不胜感激。
最佳答案
要使用字体awesome图标,请在html页面的<head></head>
部分中添加以下行(cdn):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@font-face {
font-family: "FontAwesome";
src: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/fa-regular-400.svg) format("svg");
}
.formLink {
text-align: center;
display: inline-block;
margin: 0 0 88px;
transition: all 0.25s ease;
width: 250px;
background: linear-gradient(to right, #e82171, #ef3e36);
padding: 24px 1.2em;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
font-size: 18px;
color: #fff;
text-decoration: none;
font-family: 'GeomanistRegular', sans-serif;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="formLink">Download now <i class="fas fa-arrow-right" style="font-family: 'FontAwesome';"></i></div>