Переместить FontAwesome Иконки ВНЕ Ли - PullRequest
Новая
       30

Переместить FontAwesome Иконки ВНЕ Ли

0 голосов
/ 08 июня 2018

У меня есть то, что, по моему мнению, должно быть простым, но это оказалось непростой задачей.

У меня просто есть <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>

Ответы [ 4 ]

0 голосов
/ 08 июня 2018

Просто отметьте список как непристойный, используя классы начальной загрузки 

<ul id="skills-list" class="list-unstyled">

Запустите фрагмент, чтобы увидеть: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

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


<ul id="skills-list" class="list-unstyled">
  <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>
0 голосов
/ 08 июня 2018

Использовать абсолютное позиционирование. 

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>
0 голосов
/ 08 июня 2018

Вы можете попробовать расположить значки () вне соответствующего элемента списка, используя позицию: абсолютная;

Я не знаю фактического визуального результата, которого вы пытаетесь достичь, ноэто должно быть что-то вроде: 

li {
  position: relative;
}

i {
  position absolute;
  left: -24px;
  top: 0;
}
0 голосов
/ 08 июня 2018 
      <ul id="skills-list">
        <i class="fas fa-check-square"></i><li> I aim to implement modern technologies into my projects using a movile first approach.</li>
      </ul>

Это все, что вы хотите?

...