将图标旁边的文本对齐或使用Unicode字符跨距

Question

我已经使用普通的CSS和html创建了如下所示的帖子列表。

如果您仔细观察，当我使用Unicode字符以及字体超棒的Unicode字符制作的图标徽章旁边时，标题文本似乎会倾斜。

为什么图标旁边的文本显示为倾斜，有没有办法解决此问题？

我尝试使用弹性盒技术无济于事。

.post {
  height: 10rem;
  padding: 1rem 0.1rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  position: relative;
}

.profile_pic {
  height: 100%;
  flex: 1;
}

.post_content {
  flex: 9;
  position: relative;
}

.avatar {
  margin: 0 auto;
  background: #FC5C7D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6A82FB, #FC5C7D);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 50%;
  height: 5rem;
  width: 5rem;
  border: 5px solid #ddd;
}

.badge {
  display: inline-block;
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 5px;
}


/* .main_title {
  display: flex;
  align-items: center;
} */

.main_title .heading {
  font-size: 1.6rem;
  margin-left: 0.8rem;
  color:
}

.star_badge {
  background: #E68E8E;
}

.tick_badge {
  background: #ECD7A8;
}

.star_badge::after {
  content: '\2605';
  position: absolute;
  color: white;
  top: 1px;
  left: 4px;
  font-size: 1rem;
}

.tick_badge::after {
  content: '\2714';
  position: absolute;
  color: white;
  top: 1px;
  left: 4px;
  font-size: 1rem;
}

.reply {
  margin-right: 0.6rem;
}

.reply::after {
  content: "\f3e5";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  opacity: 0.8;
}

.username {
  color: #BEB4BC;
}

.timestamp {
  color: #BEB4BC;
  opacity: 0.8;
}

.excerpt {
  color: #BEB4BC;
  opacity: 0.6;
}

.statscat {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.statscat span:not(:first-child) {
  margin-left: 2rem;
}

.replies {
  color: #BEB4BC;
  opacity: 0.8;
  font-size: 1.2rem;
}

.replies::before {
  content: "\f27a";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  margin-right: 1.4rem;
}

.views {
  color: #BEB4BC;
  opacity: 0.8;
  font-size: 1.2rem;
}

.views::before {
  content: "\f06e";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  margin-right: 1.4rem;
}

.category {
  color: white;
  background: lightblue;
  padding: 0.2rem 0.8rem;
  font-size: 1.2rem;
  border-radius: 2px;
}

<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="posts">

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>

      <div class="statscat">
        <span class="replies">11</span>
        <span class="views">89</span>
        <span class="category">Opinions</span>
      </div>


    </div>
  </div>

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>
    </div>

    <div class="statscat">
      <span class="replies">11</span>
      <span class="views">89</span>
      <span class="category">Opinions</span>
    </div>
  </div>

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>
    </div>

    <div class="statscat">
      <span class="replies">11</span>
      <span class="views">89</span>
      <span class="category">Opinions</span>
    </div>
  </div>

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>
    </div>

    <div class="statscat">
      <span class="replies">11</span>
      <span class="views">89</span>
      <span class="category">Opinions</span>
    </div>

  </div>
</div>

也请在整页中查看输出。

Answer 1

我检查了您提供的屏幕截图。将图像加载到编辑器中，并使用指南检查标题是否倾斜。

标题以及其他文本和图标似乎没有倾斜。我唯一看到的是与第一篇文章相比，第二篇文章中的comment，view和options元素在顶部略微对齐。

下面是带有指南的图像。希望这会有所帮助。

我修改了html代码以解决对齐问题。下面是代码

<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="posts">

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>
    </div>
      <div class="statscat">
        <span class="replies">11</span>
        <span class="views">89</span>
        <span class="category">Opinions</span>
      </div>


    </div>
  </div>

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>
    </div>

    <div class="statscat">
      <span class="replies">11</span>
      <span class="views">89</span>
      <span class="category">Opinions</span>
    </div>
  </div>

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>
    </div>

    <div class="statscat">
      <span class="replies">11</span>
      <span class="views">89</span>
      <span class="category">Opinions</span>
    </div>
  </div>

  <div class="post">
    <div class="profile_pic">
      <div class="avatar"></div>
    </div>
    <div class="post_content">
      <div class="main_title">
        <a class="star_badge badge"></a>
        <a class="tick_badge badge"></a>
        <span class="heading">
                Will this forum be beneficial
              </span>
      </div>
      <div class="user_details">
        <span class="reply"></span>
        <span class="username">Minded</span>
        <span class="timestamp">replied 4 hours ago</span>
      </div>
      <div class="excerpt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat voluptas itaque ipsa quasi porro sit perferendis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, ipsam?
      </div>
    </div>

    <div class="statscat">
      <span class="replies">11</span>
      <span class="views">89</span>
      <span class="category">Opinions</span>
    </div>

  </div>
</div>