Usando o ícone Font Awesome para marcadores, com um único elemento de item de lista

Gostaríamos de poder usar um ícone Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) como um marcador para listas não ordenadas em um CMS.

O editor de texto no CMS gera apenas HTML bruto, portanto, elementos / classes adicionais não podem ser adicionados.

Isso significa exibir os ícones quando a marcação é assim:

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

O primeiro problema que posso ver se o Font Awesome exige um atributo diferente de família de fontes, o que exigiria um elemento separado.

Isso é possível usando CSS puro? Ou eu teria que acrescentar o elemento ao início de cada item da lista usando algo como jQuery?

Sei que podemos usar um fallback de uma imagem de plano de fundo, mas seria ótimo usar o Font Awesome, se possível.

Solução:

http://jsfiddle.net/VR2hP/

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

Aqui está um post do blog que explica essa técnica em profundidade.

O novo fontawesome (versão 4.0.3) torna isso realmente fácil de fazer. Simplesmente usamos as seguintes classes:

<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>

De acordo com este (novo) URL: http://fontawesome.io/examples/#list

Eu gostaria de desenvolver algumas das respostas acima e fornecidas em outros lugares e sugerir o uso de posicionamento absoluto junto com a pseudo classe: before . Muitos dos exemplos acima (e em perguntas semelhantes) estão utilizando marcação HTML personalizada, incluindo o método de manipulação do Font Awesome. Isso vai contra a pergunta original e não é estritamente necessário.

DEMO AQUI

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;
}

É basicamente isso. Você pode obter o valor ISO para uso em conteúdo CSS na folha de dicas Font Awesome . Basta usar os últimos 4 alfanuméricos prefixados com uma barra invertida. Então []se torna\f058

Há um exemplo de como usar o Font Awesome ao lado de uma lista não ordenada na página de exemplos .

<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>

Se você não conseguir encontrá-lo funcionando depois de tentar esse código, não estará incluindo a biblioteca corretamente. De acordo com o site deles, você deve incluir as bibliotecas como tais:

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

Confira também a publicação extravagante de Chris Coyier sobre fontes de ícone em seu site CSS Tricks .

Aqui está um screencast dele, falando sobre como criar sua própria fonte de ícone.

@Tama, convém verificar esta resposta: Usando ícones de fonte impressionante como marcadores

Basicamente, você pode fazer isso usando apenas CSS sem a necessidade de marcação extra, conforme sugerido por FontAwesome e as outras respostas aqui.

Em outras palavras, você pode realizar o que precisa usando a mesma marcação básica mencionada em sua postagem inicial:

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

Obrigado.

Minha solução usando padrão <ul>e <i>dentro<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>

DEMO AQUI

No Font Awesome 5, isso pode ser feito usando CSS puro, como em algumas das respostas acima, com algumas modificações.

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;
}

Sem o peso da fonte correto, ele mostrará apenas um quadrado em branco.

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