时间戳

首页 > 解决方案 > 将 FontAwesome 图标移到 li 之外

css - 将 FontAwesome 图标移到 li 之外

问题描述

我觉得应该是一个简单的问题，但事实证明这是一个棘手的问题。

我只是有一个<ul>带有各种<li>元素的。分配给每个 LI 的是一个很棒的字体图标。

我的问题是我希望图标位于列表项的外部，此时它在内部并推动第一行文本，我希望两行文本都在图标旁边内联。

我尝试过使用以下内容：-

#skills-list li{
    list-style-position: outside;
}

似乎这只适用于标准标记，如子弹等。我也尝试过针对其他类，例如：-

#skills-list li.i{...}

#skills-list li.a{...}

有人能帮忙吗，下面是我的代码：-

<ul id="skills-list">
  <li><i class="fas fa-check-square"></i> I aim to implement modern technologies into my projects using a movile first approach.</li>
  <li><i class="fas fa-check-square"></i> Exposing myself to GIT allows me to track, comment and update my project in a team repository.</li>
  <li><i class="fas fa-check-square"></i> Working with BOOTSTRAP frameworks allows implementation of elegant and modern design.</li>
  <li><i class="fas fa-check-square"></i> Learning SASS allowed me to speed up my web design process, creating fast and efficient CSS3.</li>
  <li><i class="fas fa-check-square"></i> Basic Understanding of JavaScript and JQuery means that I understand the process of DOM Manipulation.</li>
  <li><i class="fas fa-check-square"></i> My previous background is in Animation, providing me with a good eye for detail and creativity.</li>
</ul>

标签： csstwitter-bootstraphtml-listscss-position

解决方案

使用绝对定位。

ul {
  list-style: none;
}

#skills-list li {
  position: relative;
}

#skills-list li i {
  position: absolute;
  left: -2em
}
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet" />
<ul id="skills-list">
  <li><i class="fas fa-check-square"></i> I aim to implement modern technologies into my projects using a movile first approach.</li>
  <li><i class="fas fa-check-square"></i> Exposing myself to GIT allows me to track, comment and update my project in a team repository.</li>
  <li><i class="fas fa-check-square"></i> Working with BOOTSTRAP frameworks allows implementation of elegant and modern design.</li>
  <li><i class="fas fa-check-square"></i> Learning SASS allowed me to speed up my web design process, creating fast and efficient CSS3.</li>
  <li><i class="fas fa-check-square"></i> Basic Understanding of JavaScript and JQuery means that I understand the process of DOM Manipulation.</li>
  <li><i class="fas fa-check-square"></i> My previous background is in Animation, providing me with a good eye for detail and creativity.</li>
</ul>

推荐阅读