Використання значка Font Awesome для точок кулі, з одним елементом списку

Ми хотіли б мати можливість використовувати піктограму Awesome Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) як точку кулі для невпорядкованих списків у CMS.

Текстовий редактор в CMS видає лише необроблений HTML, тому додаткові елементи / класи не можуть бути додані.

Це означає відображення піктограм, коли розмітка виглядає так:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Перша проблема, яку я можу побачити, чи потрібен шрифтові Awesome інший атрибут сімейства шрифтів, який потребував би окремого елемента.

Це можливо за допомогою чистого CSS? Або мені доведеться додавати елемент до початку кожного елемента списку, використовуючи щось на зразок jQuery?

Я усвідомлюю, що ми можемо використати заднє фонове зображення, але було б чудово використовувати шрифт Awesome, якщо це можливо.

Рішення:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

Ось допис у блозі, який детально пояснює цю техніку.

Новий джерело (версія 4.0.3) робить це дуже просто. Ми просто використовуємо наступні класи:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

Відповідно до цієї (нової) URL-адреси: http://fontawesome.io/examples/#list

Я хотів би спиратися на деякі відповіді вище та наведені в іншому місці та пропоную використовувати абсолютне позиціонування разом із класом: перед псевдокласом . У багатьох наведених вище прикладах (і в подібних питаннях) використовується спеціальна розмітка HTML, включаючи метод обробки Font Awesome. Це суперечить первісному питанню, і це не обов'язково.

ДЕМО ТУТ

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

Це в основному все. Ви можете отримати значення ISO для використання у вмісті CSS на шаблоні Font Awesome . Просто використовуйте останні 4 буквено-цифрові символи з попередньою косою рисою. Так []стає\f058

Там приклад того , як використовувати Шрифт Високий поряд невпорядкований список на їх сторінці прикладів .

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

Якщо після спроби цього коду ви не можете знайти його, ви не включаєте бібліотеку правильно. Відповідно до їх веб-сайту, ви повинні включати бібліотеки як такі:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Також перегляньте примхливий пост Кріса Койєра про шрифти значків на своєму веб-сайті CSS Tricks .

Ось його скріншот , а також розповідається про те, як створити власний шрифт із значком.

@Tama, ви можете перевірити цю відповідь: Використання значків Font Awesome як кулі

В основному, ви можете досягти цього, використовуючи лише CSS без необхідності додаткової розмітки, як запропонував FontAwesome, та інших відповідей тут.

Іншими словами, ви можете виконати те, що вам потрібно, використовуючи ту саму основну розмітку, яку ви згадали у своїй початковій публікації:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Дякую.

Моє рішення з використанням стандартного <ul>і <i>всередині<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

ДЕМО ТУТ

У шрифті Awesome 5 це можна зробити за допомогою чистого CSS, як у деяких з вищезазначених відповідей з деякими модифікаціями.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Без правильної ваги шрифту він відображатиме лише порожній квадрат.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define