Como usar ícones e símbolos de "Font Awesome" no aplicativo Android nativo

153

Estou tentando usar o Font Awesome no meu aplicativo, consegui integrar a fonte usando Typeface.createFromAsset(), mas também quero usar os ícones fornecidos por essa fonte, mas até agora não consegui fazer isso.

Essa fonte específica contém ícones dentro da Área de uso privado Unicode (PUA), para itens como controles do media player, acesso ao sistema de arquivos, setas, etc.

Alguém usou fontes que contêm ícones e símbolos no Android? Isso é possível?

Julian Suarez
fonte
2
Eu atualizei o link
Julian Suarez ''
23
Não concordo que isso não seja o tópico do Stack Overflow. Parece-me que ele se encaixa nessas diretrizes ( stackoverflow.com/help/on-topic ), pois é: sobre um problema de programação específico (como aplicar um ícone específico baseado em fonte definido para uma plataforma móvel específica) e é um problema prático e responsável (veja minha resposta abaixo, que acho que ilustra isso).
Keith Corwin
Confira este repositório para implementar a fonte impressionante no android github.com/bperin/FontAwesomeAndroid
Brian
verifique esta biblioteca: blog.shamanland.com/p/android-fonticon-library.html , está disponível no Maven Central. consulte demo-app: play.google.com/store/apps/…
Oleksii K.

Respostas:

307

Font Awesome parece estar funcionando bem para mim no meu aplicativo para Android. Eu fiz o seguinte:

  1. Copiado fontawesome-webfont.ttfpara minha pasta de atestados
  2. Encontrei as entidades de caracteres dos ícones que eu queria, usando esta página: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. Criou uma entrada em strings.xml para cada ícone. Por exemplo, para um coração:

    <string name="icon_heart">&#xf004;</string>
  4. Referenciei a referida entrada na visualização do meu layout xml:

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
  5. Carregou a fonte no meu método onCreate e defina-a para as Visualizações apropriadas:

    Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
    ...
    Button button = (Button)findViewById( R.id.like );
    button.setTypeface(font);
Keith Corwin
fonte
46
Boa ideia. Mas cuidado com os problemas de memória ao criar constantemente um novo tipo de letra para cada ícone. Em vez disso, use algo como Hashtablea re-utilizar o ícone do tipo de letra, como sugerido aqui: code.google.com/p/android/issues/detail?id=9904#c7
saschoar
1
Eu faço assim: stackoverflow.com/questions/2973270/…
Informatic0re:
4
Eu criei um projeto para isso: bitbucket.org/informatic0re/awesome-font-iconview
Informatic0re
1
Eu tenho alguns problemas com o meu código: se eu declarar a string strings.xmlcomo em <string name="faicon">&#xf001;</string>seguida, definir texto no meu código, tudo ficará bem. Mas quando tento mTextView.setText("&#xf004;");mostrar apenas o texto bruto. Alguém poderia ajudar? thks
vtproduction 30/07/2015
2
Adicione uma sequência dinâmica ao textview como este text.setText (Html.fromHtml ("& # xf000;"));
simples
29

Experimente o IcoMoon: http://icomoon.io

  • Escolha os ícones que você deseja
  • Atribua caracteres a cada ícone
  • Faça o download da fonte

Digamos, você escolheu o ícone de reprodução, atribuiu a letra 'P' a ele e baixou o arquivo icomoon.ttfpara a pasta de ativos. É assim que você mostra o ícone:

xml:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="48sp"
  android:text="P" />

Java:

Typeface typeface = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
textView.setTypeface(typeface);

Fiz uma palestra sobre como criar belos aplicativos para Android, que inclui explicações sobre o uso de fontes de ícones, além de adicionar gradientes para tornar os ícones ainda mais bonitos: http://www.sqisland.com/talks/beautiful-android

A explicação da fonte do ícone começa no slide 34: http://www.sqisland.com/talks/beautiful-android/#34

chiuki
fonte
10

Talvez tarde demais, mas eu tinha a mesma necessidade que eu tenha publicado este https://github.com/liltof/font-awsome-for-android É uma versão xml pronto android de utilizável incrível fonte apenas como Keith Corwin disse

Espero que ajude os outros.

liltof
fonte
1
Bem-vindo ao SO. Vi que seu código não é muito longo. Por que você não o publica nesta resposta? Os links podem falhar com o tempo.
Andre Silva
Eu tenho usado esse ótimo arquivo .xml por semanas. Mas agora eu percebi que falta fa_times. Você pode atualizá-lo? Edit: oh, é fa_remove. ou icon_remove no seu arquivo.
mobilGelistirici
Como adicionar texto e ícone no botão usando uma fonte incrível? Como adicionar botão de desenho à esquerda ou de desenho à direita.
Siddharth_Vyas
9

Como acima, é um ótimo exemplo e funciona muito bem:

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf" );

Button button = (Button)findViewById( R.id.like );
button.setTypeface(font);

MAS! > isso funcionará se a string dentro do botão que você definir no xml:

<string name="icon_heart">&#xf004;</string>
button.setText(getString(R.string.icon_heart));

Se você precisar adicioná-lo dinamicamente, use:

String iconHeart = "&#xf004;";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");
user1540907
fonte
melhor maneira de sempre! Graças eu dou + votação _ apenas botão atenção é textview e substituir String.valueOf com corda get
erfan
Finalmente, uma solução para usar fonte incrível. Muito obrigado!
Clamorious
4

Se você deseja setText programático sem incluir string em string.xml

veja seu código hexadecimal aqui:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

substituir & # xf066; para 0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));
Haryanto
fonte
4

Há uma biblioteca pequena e útil projetada para esses propósitos :

dependencies {
    compile 'com.shamanland:fonticon:0.1.9'
}

Obtenha demonstração no Google Play .

insira a descrição da imagem aqui

Você pode adicionar facilmente um ícone baseado em fonte no seu layout:

<com.shamanland.fonticon.FontIconView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/ic_android"
    android:textSize="@dimen/icon_size"
    android:textColor="@color/icon_color"
    />

Você pode aumentar o ícone da fonte a partir Drawabledo xml:

<?xml version="1.0" encoding="utf-8"?>
<font-icon
    xmlns:android="http://schemas.android.com/apk/res-auto"
    android:text="@string/ic_android"
    android:textSize="@dimen/big_icon_size"
    android:textColor="@color/green_170"
    />

Código Java:

Drawable icon = FontIconDrawable.inflate(getResources(), R.xml.ic_android);

Ligações:

Oleksii K.
fonte
muito boa biblioteca, obrigado. O XML-definições infláveis são um pouco de dor, porém, eu prefiro usar diretamente o FontIconView
hotzen
Eu testei isso em uma Lenovo com Android 4.2.2 e os ícones não apareceram, o que pode ser?
Ollie Strevel 23/02
Experimente a versão mais recente0.1.9
Oleksii K.
2

Eu criei essa classe auxiliar em C # (Xamarin) para definir programaticamente a propriedade text. Isso funciona muito bem para mim:

internal static class FontAwesomeManager
{
    private static readonly Typeface AwesomeFont = Typeface.CreateFromAsset(App.Application.Context.Assets, "FontAwesome.ttf");

    private static readonly Dictionary<FontAwesomeIcon, string> IconMap = new Dictionary<FontAwesomeIcon, string>
    {
        {FontAwesomeIcon.Bars, "\uf0c9"},
        {FontAwesomeIcon.Calendar, "\uf073"},
        {FontAwesomeIcon.Child, "\uf1ae"},
        {FontAwesomeIcon.Cog, "\uf013"},
        {FontAwesomeIcon.Eye, "\uf06e"},
        {FontAwesomeIcon.Filter, "\uf0b0"},
        {FontAwesomeIcon.Link, "\uf0c1"},
        {FontAwesomeIcon.ListOrderedList, "\uf0cb"},
        {FontAwesomeIcon.PencilSquareOutline, "\uf044"},
        {FontAwesomeIcon.Picture, "\uf03e"},
        {FontAwesomeIcon.PlayCircleOutline, "\uf01d"},
        {FontAwesomeIcon.SignOut, "\uf08b"},
        {FontAwesomeIcon.Sliders, "\uf1de"}
    };

    public static void Awesomify(this TextView view, FontAwesomeIcon icon)
    {
        var iconString = IconMap[icon];

        view.Text = iconString;
        view.SetTypeface(AwesomeFont, TypefaceStyle.Normal);
    }
}

enum FontAwesomeIcon
{
    Bars,
    Calendar,
    Child,
    Cog,
    Eye,
    Filter,
    Link,
    ListOrderedList,
    PencilSquareOutline,
    Picture,
    PlayCircleOutline,
    SignOut,
    Sliders
}

Deve ser fácil o suficiente para converter para Java, eu acho. Espero que ajude alguém!

Andres Sepulveda
fonte
2

Uma das bibliotecas que eu uso para o Font Awesome é a seguinte:

https://github.com/Bearded-Hen/Android-Bootstrap

Especificamente,

https://github.com/Bearded-Hen/Android-Bootstrap/wiki/Font-Awesome-Text

A documentação é fácil de entender.

Primeiro, adicione as dependências necessárias no build.gradle:

dependencies {
    compile 'com.beardedhen:androidbootstrap:1.2.3'
}

Em segundo lugar, você pode adicionar isso ao seu XML:

<com.beardedhen.androidbootstrap.FontAwesomeText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontawesometext:fa_icon="fa-github"
    android:layout_margin="10dp" 
    android:textSize="32sp"
/>

mas certifique-se de adicionar isso ao seu layout raiz se desejar usar o exemplo de código acima:

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"
Abdul Rahman A Samad
fonte
Eu segui isso, mas recebi o erro: Erro: (54) Nenhum identificador de recurso encontrado para o atributo 'fa_icon' no pacote 'xxx.yyy'
Hajjat ​​10/02/16
@Hajjat ​​para usar isso, você precisa usar a versão 1.2.3. Acabei de atualizar o código para refletir isso. Tente.
Abdul Rahman A Samad
1

A biblioteca FontView permite usar caracteres de fonte normal / unicode como ícones / gráficos em seu aplicativo. Ele pode carregar a fonte por meio de ativos ou de um local de rede.

O benefício desta biblioteca é que:

1 - it takes care of remote resources for you
2 - scales the font size in dynamically sized views
3 - allows the font to easily be styled.

https://github.com/shellum/fontView

Exemplo:

Layout:

<com.finalhack.fontview.FontView
        android:id="@+id/someActionIcon"
        android:layout_width="80dp"
        android:layout_height="80dp" />

Java:

fontView.setupFont("fonts/font.ttf", character, FontView.ImageType.CIRCLE);
fontView.addForegroundColor(Color.RED);
fontView.addBackgroundColor(Color.WHITE);
Shellum
fonte
Ele armazena em cache o objeto Typeface na memória? Existe um potencial conhecido de vazamento de memória ao manipular fontes no Android.
TheRealChx101 14/09
1

Há outra solução interessante que você pode usar diretamente nos arquivos xml do layout e não precisa usar setTypeface.

É o Iconify de Joan Zapata . Você pode ler aqui o que há de novo no Iconify v2 . Inclui 9 bibliotecas de fontes diferentes que você pode simplesmente usar adicionando dependências ao seu build.gradle arquivo .

Nos arquivos xml de layout, é possível escolher entre estes widgets:

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton
gus27
fonte
1

Inicialmente, crie uma pasta de ativos e copie o ícone fontawesome (.ttf) Como criar uma pasta de ativos?

app -> clique direito -> novo -> pasta -> pasta de ativos

próximo passo baixar como baixar o arquivo .ttf? clique aqui -> e clique no botão de download após o download extrair e abrir fontes da web. finalmente, escolha a pasta de ativos de colar estilo de texto verdadeiro (ttf).

como projetar arquivos xml e java no android?

app -> res -> valores string.xml

resources
    string name="calander_font" >&#xf073; <string
resources

Neste exemplo de uma fonte mais Unicode clique aqui

Activity_main.xml

 <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/calander_view"/>

MainActivity.java

calander_tv = (TextView)findViewById(R.id.calander_view);

Typeface typeface = Typeface.createFromAsset(getAssets(),"/fonts/fa-solid-900.ttf");
calander_tv.setTypeface(typeface);
calander_tv.setText(R.string.calander_font);

Resultado:

Imagem de saída

Manoj Kumar T
fonte
0

Estou um pouco atrasado para a festa, mas escrevi uma exibição personalizada que permite fazer isso; por padrão, ela está definida como entypo, mas você pode modificá-la para usar qualquer ícone de fonte: confira aqui: github.com/MarsVard/IconView

// editar a biblioteca é antiga e não é mais suportada ... nova aqui https://github.com/MarsVard/IonIconView

Marte
fonte
Sua biblioteca não está armazenando em cache o Typeface e, em vez disso, está construindo-o toda vez que a exibição é renderizada.
Fernando Camargo
1
@FernandoCamargo está certo, esta biblioteca é antiga e deve ser atualizada com melhor cache ... aqui está a nova biblioteca com melhor desempenho github.com/MarsVard/IonIconView
Marte
0

Caso você precise apenas de alguns ícones impressionantes de fontes, também é possível usar o http://fa2png.io para gerar imagens normais de pixels. Mas se você adicionar novos ícones / botões regularmente, recomendo a versão .ttf como mais flexível.

j7nn7k
fonte
0

Se alguém se pergunta como adicioná-lo programaticamente, você deve fazê-lo dessa maneira.

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part
Tower Jimmy
fonte
0

Como todas as respostas são grandes, mas eu não queria usar uma biblioteca e cada solução com apenas uma linha de código java fez meu Activitiese Fragmentsmuito confuso. Então, eu escrevi a TextViewclasse da seguinte maneira:

public class FontAwesomeTextView extends TextView {
private static final String TAG = "TextViewFontAwesome";
public FontAwesomeTextView(Context context) {
    super(context);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

private void setCustomFont(Context ctx, AttributeSet attrs) {
    TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.TextViewPlus);
    String customFont = a.getString(R.styleable.TextViewPlus_customFont);
    setCustomFont(ctx, customFont);
    a.recycle();
}

private void init() {
    if (!isInEditMode()) {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fontawesome-webfont.ttf");
        setTypeface(tf);
    }
}

public boolean setCustomFont(Context ctx, String asset) {
    Typeface typeface = null;
    try {
        typeface = Typeface.createFromAsset(ctx.getAssets(), asset);
    } catch (Exception e) {
        Log.e(TAG, "Unable to load typeface: "+e.getMessage());
        return false;
    }

    setTypeface(typeface);
    return true;
}
}

o que você deve fazer é copiar o ttfarquivo da fonte na assetspasta. E use esta folha de dicas para encontrar cada sequência de ícones.

espero que isto ajude.

Pouya Danesh
fonte