admin 管理员组

文章数量: 1086019


2024年3月19日发(作者：ant design 是什么)

ionic自定义图标

概述

Ionic 框架中内置了很多图标，我们只需要引用 ionic icons 中的样式即可

Ionic tabs 示例工程中的 tab 图标

<

ion-tab title="Chats"

//

ion-ios7-chatboxes-outline on-ios7-chatboxes

指的就是图标样式

icon-off="ion-ios7-chatboxes-outline"

icon-on="ion-ios7-chatboxes" href="#/tab/chats">

<

ion-nav-view name="tab-chats">

但是有时我们需要自己的图标，因此我们需要定义自己的图标 比如

原理

Ionic 中内置的所有图标，都是通过字体文件以css 样式的方式引入

@font-face {

font-family: "Ionicons";

src: url("../fonts/?v=1.5.2");

src: url("../fonts/?v=1.5.2#iefix") format("embedded-opentype"),

url("../fonts/?v=1.5.2") format("truetype"),

url("../fonts/?v=1.5.2") format("woff"),

url("../fonts/?v=1.5.2#Ionicons") format("svg");

font-weight: normal;

font-style: normal; }

修改起来太麻烦

因此我们想要自己的图标，可以参照这种方式，定义自己的图标 ，自定义图标实际上就成

了自定义字体，归纳起来可分为三步

1这里我们需要自己准备 svg格式的矢量图

2 生成字体文件

3 在CSS中引用字体文件

自定义图标操作步骤

A将要生成的图标 做成svg格式 详情可参见

/help/


本文标签： 图标 需要 格式 字体 文件

版权声明：本文标题：ionic自定义字体图标 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1710795980a573542.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。