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


131

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.

Respostas:


248

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.


18
Uma lista útil de traduções de estes ícones font-awesome para valores CSS é aqui: astronautweb.co/snippet/font-awesome
Scott C Wilson

24
Você vai querer incluir este para remover os pontos de bala padrãoul { list-style-type: none; }
Edd

Por que esse método não está funcionando quando tenho duas listas na mesma página?
deKajoo

6
Muito bom, a única coisa que eu sugeriria para alinhar melhor é usar margin: 0 0.2em 0 -1.2em;apenas aumentar / diminuir os dois valores na mesma quantidade para obter o espaçamento desejado. Se você usar um valor fixo de pixel que não corresponde corretamente à sua fonte, notará uma discrepância nos itens da lista de várias linhas.
BRAKS

Eu adicionei uma ul prefixo para este caso contrário ele iria tentar fazê-lo se o cliente usou os cms para criar uma lista ordenada (numerada)
rtpHarry

154

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


12
Essa deve ser a resposta correta, com a nova versão fa. Muito bem feito, obrigado por esta explicação.
David

23
Eu discordo, a pergunta pediu uma solução usando uma única lista em CSS puro. Isso usa HTML adicional, bem como classes. Embora essa seja definitivamente a maneira que os documentos da FA especificam para fazer isso, tecnicamente não é a solução para a pergunta e não é útil se você estiver procurando fazer isso sem modificar sua saída HTML.
Ryan

Eu sei o que você está procurando - mas pessoas que não estão constantemente escrevendo CSS puro em situações em que não conseguem modificar o HTML ???? (sério, por favor, olhe para mudar sua estrutura da web) precisará da atualização da memória de consulta do Google para vincular à maneira impressionante de documentos impressionantes da fonte 'correta', justaposta à resposta 'real', uma ao lado da outra para decidir. Eu não quero dizer "não há apenas uma resposta correta para o problema", mas não há ...
lol

1
Essa abordagem não funciona bem com os elementos da lista agrupados em várias linhas, pois a identificação em linhas adicionais não será expandida para incluir a largura do ícone.
Lars Haugseth

2
Provavelmente vale a pena adicionar, com o FA 4.3 (provavelmente também em outras versões) e o Bootstrap 3, os itens ule liprecisam ser definidos, position: relativepois o fa-liitem é posicionado absoluto. Caso contrário, todos eles irão flutuar até o canto superior esquerdo.
21715 Jeremy Harris

14

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 [&#xf058;]se torna\f058


4

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.


2
Você não precisa da marcação extra: li:beforepode ter uma família de fontes diferente da liprópria.
Cimmanon

@ cimmanon: Embora você esteja realmente correto, a documentação do Font Awesome sugere que você deve ter uma marcação extra. Tecnicamente, não é necessário, no entanto, acho que pode ser necessário pesquisar os glifos da fonte para descobrir qual chave está mapeada para qual símbolo. Isso exigiria algum tempo e paciência, mas com certeza, sua solução também funcionaria.
cereallarceny

@cereallarceny - o problema que temos é o editor de HTML (TinyMCE) para o CMS produz o formato que eu dei na minha pergunta. Portanto, dessa perspectiva, não temos controle sobre o HTML da lista. A menos que configuremos o TinyMCE para incluir o elemento i (e não excluí-lo como um elemento vazio).
BaronGrivet 19/09/2012

Então você não tem acesso ao HTML, você tem acesso ao CSS?
cereallarceny

Sim, acesso completo ao CSS.
BaronGrivet

1

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


1

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>

insira a descrição da imagem aqui

DEMO AQUI


1

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.