我正在尝试使用字体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>

10-07 19:12
查看更多