Android使用iconfont图标

本文详细介绍了如何在Android Studio项目中集成IconFont图标库,包括从iconfont网站选择图标,下载ttf文件,将其放入assets文件夹,以及创建自定义TextView来显示图标。此外,还展示了如何通过字符串资源引用图标并更新图标的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.从iconfont网站中选择自己的想要的图标(登录就不需要说了吧)

例如
在这里插入图片描述

搜索购物车图标,把想要的图标放入购物车
添加置项目 , 没有就自己新建一个

进入到项目
在这里插入图片描述

把这个文件下载下来之后,解压
在这里插入图片描述

将这个iconfont.ttf放入AndroidStudio项目中的main下面的assets文件夹里,没有就新建一个
在这里插入图片描述

用法

 val icon: Typeface = Typeface.createFromAsset(context.assets, "iconfont.ttf")
 textview.typeface = icon

为了方便复用,我们可以自定义一个类去继承textview

class IconFontView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) {
    init {
        val icon: Typeface = Typeface.createFromAsset(context.assets, "iconfont.ttf")
        this.typeface = icon
    }
}

在这里插入图片描述
这里的就是值得iconfont网站上的图标文字
可以把文字放入strings文件里面

 <string name="demo">&#xe8bc;</string>

然后引入

android:text = "@string/demo"

在这里插入图片描述
这样就算完成了。现在可以显示我们的图标了~

如果需要后续添加图标,得重新从网站上下载文件,吧iconfont.ttf文件覆盖掉,才能用这个文字去显示图标,或者弄一个新的ttf文件

### 如何在 Uniapp 项目中集成与使用 Iconfont 图标 #### 准备工作 为了能够在 Uniapp 中使用 Iconfont 图标,首先需要确保开发环境已经搭建完毕。这通常意味着需要安装并配置好 HBuilderX 开发工具[^3]。 #### 下载与引入字体文件 前往阿里巴巴矢量图标库 (https://www.iconfont.cn/) 创建属于自己的项目,并下载所需的图标集合。解压后得到 `iconfont.css` 和对应的字体文件(如 `.ttf`, `.woff` 等)。这些文件可以通过静态资源的方式加载到 Uniapp 的项目中[^1]。 #### 修改样式表 将下载下来的 `iconfont.css` 文件中的相对路径调整为适合项目的绝对路径。例如: ```css @font-face { font-family: 'iconfont'; /* project id */ src: url('/static/iconfont/iconfont.eot'); /* IE9*/ src: url('/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/static/iconfont/iconfont.woff2') format('woff2'), url('/static/iconfont/iconfont.woff') format('woff'), /* chrome, firefox */ url('/static/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('/static/iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } ``` 上述代码片段展示了如何通过修改 CSS 来适配 Uniapp 的目录结构。 #### 使用方法 在模板中可以按照以下两种方式进行调用: ##### 方法一:直接嵌入 Unicode 字符 这种方式适用于简单的场景,只需要指定类名以及具体的字符编码即可。 ```html <view class="icon iconfont"></view> ``` 这里需要注意的是,`` 是具体图标的 Unicode 编码,可以根据实际需求替换相应的值。 ##### 方法二:利用自定义类名 对于更复杂的布局或者希望增强可读性的场合,则推荐采用第二种方式——即给定额外的子类名称来区分不同的图标实例。 ```html <view class="icon iconfont icon-fanhui">返回</view> ``` 此例子中,“icon-fanhui”代表了一个特定样式的回退按钮。 #### 运行调试 最后一步是在本地环境中测试效果。启动 HBuilderX 并连接至微信开发者工具以验证最终呈现是否符合预期[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值