Question

我正在努力重现我发现的设计，设计显示了如下文字箭头：

知道如何制作那支箭吗？显而易见的>看起来不对：

Answer 1

他们有很多图标 - 搜索＆＃39; fa-angle-right＆＃39;在此页面上：http://fontawesome.io/cheatsheet

否则，您可以使用png或svg。

Answer 2

您的设计师似乎使用了chevron-right from Font Awesome。您可以通过像下面所做的那样通过Font Awesome CDN或通过任何other setup options添加样式表来进行安装。然后，您可以通过复制Font Awesome documentation为您提供的图标代码来引用页面上的图标。

这里是一个演示，我尝试过重新创建您的图像：

:root {
  background-color: #22272A;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #BCBDBD;
}

.fa-chevron-right {
  margin-left: 6px;
}

HIKING <span class="fas fa-chevron-right"></span>

<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

在生产代码中，您可能想为performance considerations选择一种不同的安装方法，以考虑页面的需求-例如，如果您没有大量的SVG，请选择使用JavaScript导入SVG。显示的图标。

Answer 3

＆＃13;

<!DOCTYPE html>
<html>
<style>
  body {
    font-size: 20px;
  }
</style>

<body>

  <p>I will display &#10095;</p>
  <p>I will display &#x276F;</p>

</body>

</html>

＆＃13;

Answer 4

您可以创建一个小方块并旋转它：

.icon {
  display: inline-block;
  width: 10px;
  position: relative;
}

.icon {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
}

<i class="icon"></i>

如何在附图中看到箭头字符？

4 个答案: