html - 制作右人字形字体的尖端 - 很棒的图标触摸 div 的末尾

Question

使用来自任何图标库的字体超赞的人字形图标或向右箭头图标，我怎样才能使图标的点完美地接触到它所在的 div 的边缘。

请看下面的代码示例，注意我是如何对齐 text-align: right;它没有完全接触到侧边栏的边缘。我相信这是因为图标右侧的间距很小。无论如何我可以控制这一点间距吗？

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.sidebar {
  flex: 00 50px;
  background-color: #ccc;
  text-align: right;
}
.content {
  flex: 1;
  background-color: #000;
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
    <div class="wrapper">
          <div class="sidebar">
      <i class="fas fa-chevron-right"></i>
    </div>
    <div class="content">
      
    </div>
    </div>

Answer 1

这应该为你做!基本上，创建一个类 .fa-chevron-right 并给它 margin-right: -2px;

您可以增加/减少 -2px 以获得您喜欢的间距!

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.sidebar {
  flex: 00 50px;
  background-color: #ccc;
  text-align: right;
}
.content {
  flex: 1;
  background-color: #000;
}
.fa-chevron-right {
  margin-right: -2px; 
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
    <div class="wrapper">
          <div class="sidebar">
      <i class="fas fa-chevron-right"></i>
    </div>
    <div class="content">
      
    </div>
    </div>