Question

我正在尝试使用Font 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。

任何帮助都将不胜感激。

Answer 1

要使用Font 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">

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 2

请参阅以下小提琴

Fiddle

您可以使用CSS导入Font Awesome文件。

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

<强> HTML

<div class="formLink">Download now <i class="fa fa-arrow-right"></i></div>

<强> CSS

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); /* FA CSS import */

.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;
}

Answer 3

您可以做的是在html头文件中使用link属性，如下所示：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

如果不尝试使用<i class="fas fa-arrow-right"></i>

，您应该可以使用所需的箭头<i class="fa fa-arrow-right"></i>

Answer 4

您可以使用font-awesome css文件或CDN。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

＆＃13;

.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;
}

＆＃13;

<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 <span class="fa fa-arrow-right" ></span></div>

＆＃13;

使用Font Awesome在按钮div中显示箭头

4 个答案: