기본 Android 애플리케이션에서“Font Awesome”의 아이콘 및 기호를 사용하는 방법


153

내 응용 프로그램에서 Font Awesome 을 사용하려고 하는데을 사용하여 글꼴 을 통합 할 수 Typeface.createFromAsset()있었지만이 글꼴에서 제공하는 아이콘을 사용하고 싶지만 지금까지는 그렇게 할 수 없었습니다.

이 특정 글꼴에는 미디어 플레이어 컨트롤, 파일 시스템 액세스, 화살표 등과 같은 PUA (Unicode Private Use Area) 내에 아이콘이 포함되어 있습니다.

안드로이드에서 아이콘과 기호가 포함 된 글꼴을 사용한 사람이 있습니까?



2
링크를 업데이트했습니다
Julian Suarez

23
이것이 스택 오버플로에 대한 주제가 아닌 것에 동의하지 않습니다. 특정 프로그래밍 문제 (특정 글꼴 기반 아이콘 세트를 특정 모바일 플랫폼에 적용하는 방법)에 대해 다음과 같은 지침 ( stackoverflow.com/help/on-topic ) 지침에 부합하는 것으로 보입니다 . 실용적이고 대답하기 쉬운 문제 (아래 설명을 참조하십시오).
Keith Corwin 2016 년


이 라이브러리를 확인하십시오 : blog.shamanland.com/p/android-fonticon-library.html , Maven Central에서 사용할 수 있습니다. demo-app 참조 : play.google.com/store/apps/…
Oleksii K.

답변:


307

Font Awesome이 내 안드로이드 앱에서 제대로 작동하는 것 같습니다. 나는 다음을 수행했다.

  1. 복사 fontawesome-webfont.ttf내 assests 폴더에
  2. 이 페이지를 사용하여 원하는 아이콘의 문자 엔티티를 찾았습니다. http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. 각 아이콘에 대해 strings.xml에 항목을 작성했습니다. 예를 들어 마음을 위해 :

    <string name="icon_heart">&#xf004;</string>
  4. 내 XML 레이아웃의 관점에서 상기 항목을 참조했습니다.

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
    
  5. 내 onCreate 메소드에 글꼴을로드하고 적절한 뷰에 맞게 설정하십시오.

    Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
    ...
    Button button = (Button)findViewById( R.id.like );
    button.setTypeface(font);
    

46
좋은 생각이야 그러나 각 아이콘에 대해 새 서체를 지속적으로 만들 때 메모리 문제에주의하십시오. 대신 Hashtable제안 된 것과 같이 아이콘 서체를 재사용 하는 것과 같은 것을 사용하십시오. code.google.com/p/android/issues/detail?id=9904#c7
saschoar

1
나는 이것을 좋아한다 : stackoverflow.com/questions/2973270/…
Informatic0re

4
: 나는이에 대한 프로젝트 생성 bitbucket.org/informatic0re/awesome-font-iconview
Informatic0re

1
나는 내 코드 몇 가지 문제를 가지고 : 나는 문자열을 선언하면 strings.xml같은 <string name="faicon">&#xf001;</string>내 코드의 다음 세트 텍스트, 그것을 확인 될 것입니다. 그러나 내가 시도 mTextView.setText("&#xf004;");하면 원시 텍스트 만 표시됩니다. 누구든지 도울 수 있습니까? thks
vtproduction

2
다음과 같이 textview에 동적 문자열을 추가하십시오.
rana_sadam

29

IcoMoon 사용해보기 : http://icomoon.io

  • 원하는 아이콘을 선택하십시오
  • 각 아이콘에 문자 할당
  • 폰트 다운로드

재생 아이콘을 선택하고 문자 'P'를 할당하고 파일 icomoon.ttf을 자산 폴더로 다운로드 했다고 가정 해보십시오. 아이콘을 표시하는 방법은 다음과 같습니다.

xml :

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

자바:

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

아이콘 글꼴 사용에 대한 설명과 아이콘을 더 예쁘게 만드는 그라디언트 추가에 대한 설명이 포함 된 아름다운 Android 앱을 만드는 방법에 대해 이야기했습니다. http://www.sqisland.com/talks/beautiful-android

아이콘 글꼴 설명은 슬라이드 34에서 시작합니다. http://www.sqisland.com/talks/beautiful-android/#34


10

어쩌면 너무 늦었지만 같은 요구가 있었기 때문에 이것을 게시했습니다 https://github.com/liltof/font-awsome-for-android Keith Corwin이 말한 것처럼 사용할 수있는 멋진 Android 글꼴 xml 버전입니다.

그것이 다른 사람들을 도울 수 있기를 바랍니다.


1
SO에 오신 것을 환영합니다. 코드가 너무 길지 않은 것을 보았습니다. 이 답변에 게시하지 않으시겠습니까? 링크가 시간과 충돌 할 수 있습니다.
Andre Silva

이 훌륭한 .xml 파일을 몇 주 동안 사용했습니다. 그러나 지금 나는 그것이 fa_times를 놓친다는 것을 깨달았습니다. 업데이트 하시겠습니까? 편집 : 아, 그것은 fa_remove입니다. 또는 파일에서 icon_remove.
mobilGelistirici

멋진 글꼴을 사용하여 버튼에 텍스트뿐만 아니라 텍스트를 추가하는 방법은 무엇입니까? 버튼에 드로어 블 왼쪽 또는 드로어 블 오른쪽을 추가하는 것과 같습니다.
Siddharth_Vyas

9

위와 같이 훌륭한 예이며 훌륭하게 작동합니다.

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

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

그러나! > 이것은 xml에서 설정 한 버튼 안의 문자열 인 경우 작동합니다.

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

동적으로 추가 해야하는 경우 다음을 사용할 수 있습니다.

String iconHeart = "&#xf004;";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");

가장 좋은 방법! 덕분에 난 그냥주의 버튼 텍스트 뷰이며, GET 문자열로 한 String.valueOf 교체 _ + 투표를 줄
에판

마지막으로 멋진 글꼴을 사용하는 솔루션입니다. 고마워요!
Clamorious

4

string.xml에 문자열을 추가하지 않고 프로그래밍 방식의 setText를 원할 경우

16 진 코드를 여기에서보십시오 :

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

대체 & # xf066; ~ 0xf066

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

4

이 목적을 위해 설계된 작고 유용한 라이브러리 가 있습니다 .

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

Google Play 데모를 가져 옵니다 .

여기에 이미지 설명을 입력하십시오

레이아웃에 글꼴 기반 아이콘을 쉽게 추가 할 수 있습니다.

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

Drawablexml에서 와 같이 font-icon을 부 풀릴 수 있습니다 .

<?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"
    />

자바 코드 :

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

연결:


정말 좋은 도서관, 감사합니다. 내가 직접 FontIconView 사용하는 것을 선호 불구하고 풍선 XML-정의는 약간의 통증이 있습니다
hotzen

Android 4.2.2가 설치된 Lenovo에서 이것을 테스트했지만 아이콘이 나타나지 않습니다.
Ollie Strevel

최신 버전을 사용해보십시오0.1.9
Oleksii K.

2

C # (Xamarin) 에서이 도우미 클래스를 프로그래밍 방식으로 텍스트 속성을 설정했습니다. 그것은 나를 위해 아주 잘 작동합니다 :

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
}

Java로 변환하기에 충분히 쉬울 것이라고 생각합니다. 그것이 누군가를 돕기를 바랍니다!


2

Font Awesome에 사용하는 라이브러리 중 하나는 다음과 같습니다.

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

구체적으로 특별히,

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

설명서는 이해하기 쉽습니다.

먼저 build.gradle에 필요한 종속성을 추가하십시오.

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

두 번째로 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"
/>

위의 코드 예제를 사용하려면 루트 레이아웃에 이것을 추가하십시오.

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"

나는 이것을 따랐지만 오류가 발생했다 : 오류 : (54) 'xxx.yyy'패키지의 'fa_icon'속성에 대한 자원 식별자를 찾을 수 없음
Hajjat

@Hajjat ​​이것을 사용하려면 버전 1.2.3을 사용해야합니다. 방금 코드를 업데이트하여 반영했습니다. 시도 해봐.
압둘 라만 A 사마 드

1

FontView 라이브러리를 사용하면 앱에서 일반 / 유니 코드 글꼴 문자를 아이콘 / 그래픽으로 사용할 수 있습니다. 자산 또는 네트워크 위치를 통해 글꼴을로드 할 수 있습니다.

이 라이브러리의 장점은 다음과 같습니다.

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

예:

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

Typeface 객체를 메모리에 캐시합니까? Android에서 글꼴을 처리 할 때 메모리 누수가 발생할 가능성이 있습니다.
TheRealChx101

1

레이아웃 xml 파일에서 직접 사용할 수 있고 사용할 필요가없는 또 다른 멋진 솔루션이 있습니다 setTypeface.

Joan Zapata의 Iconify 입니다. Iconify v2 의 새로운 기능을 여기에서 읽을 수 있습니다 . build.gradle 파일에 종속성을 추가하여 간단하게 사용할 수있는 9 가지 글꼴 라이브러리가 포함되어 있습니다.

레이아웃 xml 파일에서 다음 위젯 중에서 선택할 수 있습니다.

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton

1

처음에 자산 폴더를 만들고 fontawesome 아이콘 (.ttf)을 복사하십시오. 자산 폴더를 만드는 방법은 무엇입니까?

app-> 오른쪽 클릭-> new-> folder-> asset 폴더

다음 단계 다운로드 .ttf 파일을 다운로드하는 방법? 여기를 클릭하십시오-> 다운로드 후 다운로드 버튼을 클릭하고 웹 글꼴을 엽니 다. 마지막으로 진정한 텍스트 스타일 (ttf) 붙여 넣기 자산 폴더를 선택하십시오.

안드로이드에서 XML과 자바 파일을 디자인하는 방법은 무엇입니까?

app-> res-> 값 string.xml

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

이 글꼴 하나 이상의 유니 코드 예를 보려면 여기를 클릭하십시오

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

산출:

출력 이미지


0

나는 파티에 약간 늦었지만 기본적으로 entypo로 설정되어 있지만 사용자 정의 아이콘을 사용하도록 수정할 수있는 사용자 정의보기를 작성했지만 어떤 iconfont를 사용하도록 수정할 수 있습니다 : 여기에서 확인하십시오 : github.com/MarsVard/IconView

// 라이브러리 편집이 오래되었고 더 이상 지원되지 않습니다 ... 여기 새 라이브러리 https://github.com/MarsVard/IonIconView


라이브러리가 서체를 캐싱하지 않고 대신 뷰가 렌더링 될 때마다 서체를 구성합니다.
페르난도 마르고

1
@FernandoCamargo는 옳습니다.이 라이브러리는 오래되었으며 더 나은 캐싱으로 업데이트해야합니다 ... 여기 더 나은 성능의 새로운 라이브러리가 있습니다 github.com/MarsVard/IonIconView
Mars

0

글꼴 멋진 아이콘이 몇 개만 필요한 경우 http://fa2png.io 를 사용 하여 일반 픽셀 이미지를 생성 할 수도 있습니다 . 그러나 새로운 아이콘 / 버튼을 정기적으로 추가하면 .ttf 버전을보다 유연하게 권장합니다.


0

누군가가 그것을 프로그램 적으로 추가하는 방법을 궁금해한다면이 방법으로해야합니다.

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

0

모든 대답 좋지만 난 그냥 한 줄의 자바 코드와 라이브러리와 각 솔루션을 사용하고 싶지 않은 나의했다 ActivitiesFragments매우 지저분합니다. 그래서 나는 TextView다음과 같이 수업을 썼습니다 .

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

당신이해야 할 일은 글꼴 ttf파일을 assets폴더에 복사하는 것입니다. 이 치트 시트 를 사용 하여 각 아이콘 문자열을 찾으십시오.

도움이 되었기를 바랍니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.