android使用Font Awesome字体图标

Font Awesome的网址见http://fontawesome.dashgame.com/,Font Awesome提供可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。

那么,真强大的一个网页字体图标库可不可以用在安卓上呢,答案是可以的。

首先我们从文章前面的网址里下载最新的库,解压后再fonts目录下找到fontawesome-webfont.ttf,将其拷至我们的项目目录assets目录下,然后从github上下载一个字符串资源放到res目录下的values目录,网址见https://github.com/liltof/font-awsome-for-android

开始编码前看效果图

从效果图看出,我们没有用一张图片,就达到了这个效果,这一切都是依赖于字体,首先,创建自定义字体

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

然后是布局,简单布局了下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#fff" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#eee"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tab1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/fa_android"
            android:textColor="#1fa67a"
            android:textSize="20sp" >
        </TextView>

        <TextView
            android:id="@+id/tab2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/fa_windows"
            android:textColor="#1fa67a"
            android:textSize="20sp" >
        </TextView>

        <TextView
            android:id="@+id/tab3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/fa_linux"
            android:textColor="#1fa67a"
            android:textSize="20sp" >
        </TextView>
    </LinearLayout>

</LinearLayout>

然后为每个TextView设置字体

private void initView() {
        Typeface font = Typeface.createFromAsset(getAssets(),
                "fontawesome-webfont.ttf");
        tab1 = (TextView) findViewById(R.id.tab1);
        tab2 = (TextView) findViewById(R.id.tab2);
        tab3 = (TextView) findViewById(R.id.tab3);

        tab1.setTypeface(font);
        tab2.setTypeface(font);
        tab3.setTypeface(font);
    }

如果你想改变图标大小和颜色,只要修改字体的大小和颜色即可,也就是说只要修改TextView的textSize和textColor。

更多使用效果待你去发现。

源码下载

http://download.csdn.net/detail/sbsujjbcy/8567213

时间: 2024-11-25 13:28:37

android使用Font Awesome字体图标的相关文章

如何在photoshop等图像编辑软件中使用Font Awesome字体图标

1.首先要下载Font Awesome字体,解压后在fonts文件夹中找到FontAwesome.otf文件,双击安装字体.如下图: 2.重启你的photoshop或者其他图像编辑软件,确保字体被软件载入. 3.在Font Awesome4.2.0所有字体图标参考页面找到你想要的图标,(注意:是图标而不是class样式),将其复制.如图: 4.回到photoshop,将其粘贴在画布上,这时得到的是一个乱码选择"字体工具",选择这个字体图标,然后在字体选项中选择Font Awesome字

在线引用font awesome字体图标

1.在HTML页面<head>标签里添加如下link链接 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 2.在页面中用<i>标签加class类名方式呈现对应的iconfonts: <i class="fa fa-quote-left">

在vuejs 中使用Font Awesome字体图标

安装 npm install vue-awesome 引入 import Vue from 'vue' /* 在下面两种方式中任选一种 */ // 仅引入用到的图标以减小打包体积 import 'vue-awesome/icons/flag' // 或者在不关心打包体积时一次引入全部图标 import 'vue-awesome/icons' /* 任选一种注册组件的方式 */ import Icon from 'vue-awesome/components/Icon' // 全局注册(在 `ma

为网站文字前面添加图标 在线调用 Font Awesome 字体图标 美化网站

一.如何开始 1.将下面的代码复制粘贴到HTML页面面的 <head> 下面 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 2.在需要添加图标的文字前面加入如下代码 <i class="fa fa-bars"></i> 根据图标选择的

Font Awesome字体图标的 用法, 很简单

http://fontawesome.dashgame.com/ 上面是 官网,  可下载,也可以CDN. 1...  加载 2...  用法 原文地址:https://www.cnblogs.com/andy-lehhaxm/p/10608636.html

字体图标使用笔记

字体图标使用笔记: 优缺点: 首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 优点: 加载文件体积小 统一展示风格,使用方法 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单 可以添加一些视觉效果如:阴影.旋转.透明度 兼容IE6 后期维护成本很低 缺点: 制作门槛有点高,需要借助专业的工具生成字库文件 需要服务器做些相应的配置来解决识别问题和跨域问题 两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Fon

iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

iconfont字体图标的使用方法

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

iconfont字体图标使用方法

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点