Ionic自定义图标

news/2024/11/15 7:30:18/

背景

开发过程中ionic自带的图标不能满足需求,需要其他自定义(设计)图标。需要使用一些 iconfont 等网站里面的图标。

开发环境

Ionic:5.4.16
Angular CLI: 8.3.0
Node: 12.9.1
OS: win32 x64

开始

1. 下载图标

比如说我需要这个 警察 的图标,去iconfont里面 添加到项目【ion-icon】里面,点击【下载到本地】
在这里插入图片描述
下载下来解压后的目录:
在这里插入图片描述

2. 添加文件到项目

将图片上面的6个文件添加到项目的assets/fonts目录下面.
实际下载的iconfont.css根据需要改成scss(不需要就不改)。
在这里插入图片描述

3. 修改样式文件

修改iconfont.scss。
注意点:

  1. url后面的路径加上…/assets/fonts/;
  2. font-size: 16px;需要注释掉,不然图标会变小;
  3. 需要添加几个类!
    在这里插入图片描述

下面是实际代码

@font-face {font-family: "iconfont";src: url('../assets/fonts/iconfont.eot?t=1588840559441'); /* IE9 */src: url('../assets/fonts/iconfont.eot?t=1588840559441#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),url('../assets/fonts/iconfont.woff?t=1588840559441') format('woff'),url('../assets/fonts/iconfont.ttf?t=1588840559441') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('../assets/fonts/iconfont.svg?t=1588840559441#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;// font-size: 16px;//删除,不然图标会变小font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}// 警察图标.ion-ios-police:before,
.ion-police:before,
.ion-police-outline:before,
.ion-ios-police-outline:before {@extend .iconfont;
}
.ion-police:before {content: "\e65e";
}
.ion-ios-police:before {content: "\e65e";
}
4. 使用自定义图标

在ion-icon标签中使用 class="ion-police"
这不是用name,原生使用是 用name
在这里插入图片描述
实际代码

  <ion-item (click)="aboutPolice()"><ion-icon class="ion-police" slot="start"></ion-icon><ion-label>警察</ion-label></ion-item>

效果图

在这里插入图片描述


http://www.ppmy.cn/news/177423.html

相关文章

Kaldi语音识别工具运行TIMIT数据库实例

这几日一直在忙课题上的工作&#xff0c;就是先把TIMIT数据库跑了下&#xff0c;附上些说明。 Kaldi安装后运行TIMIT例子&#xff1a; 1. 对于Kaldi-master版本中&#xff0c;/egs/timit/s5下面的关键三个文件cmd.sh&#xff0c;path.sh&#xff0c;run.sh,运行前只需要修改将r…

三菱驱动器参数表_三菱伺服驱动器参数设置CM100TJ-24F

进口伺服电机驱动器 伺服电机控制器 零配件销售jsoknkudfg 联系人&#xff1a;程经理 手机&#xff1a; 手机&#xff1a; QQ:937926739 固话&#xff1a;021-6131-6707 固话&#xff1a;021-6131-8625 减速机出力太小出现的断轴问题 如果不是驱动电机轴断&#xff0c;而是减速…

Hadoop实现HDFS编程

文章目录 一、Hadoop是什么&#xff1f;二、使用步骤1.IDEA中使用Maven构建HDFS API2&#xff0e;HDFS基本操作3&#xff0e;SequenceFile&#xff1b;4&#xff0e;MapFile 出现的问题与解决方案 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、Ha…

青年大学习里的粉色玩偶介绍

每次青年大学习&#xff0c;都被这个玩偶吸引了&#xff0c;今天去特意查了一下 原来她叫“团宝”&#xff0c;是共青团的吉祥物 它的使命所在是引领当代青年践行爱国、敬业、诚信、友善的公民基本道德规范

新粉色苹果CMS10视频站源码模板 仿APP内附教程

介绍&#xff1a; 苹果CMS10模版 魅力社新粉色视频站源码 仿APP 后台就是苹果cms后台&#xff0c;这里就不放后台了 网盘下载地址&#xff1a; http://kekewl.cc/aVh2EzYAaHI 图片&#xff1a;

关于Unity中更新到HDRP会导致材质变粉色的问题

不是所有的Built-in材质都能自动升级到适配HDRP的shader&#xff0c;有需要自定义部分的shader要用Shader Graphs来修改&#xff0c;比如粒子shader&#xff0c;Built-in的Particles shader要转换为Shader Graph中的ParticleLit或ParticleUnlit系列。如不太清楚的话&#xff0c…

导入系统环境包Environment,水是粉色解决方案

导入系统的包也不一定就对&#xff0c;今天我遇到的这个问题就是一个例子 上面的这张图片就是这个问题&#xff0c;其实你打开下面这张图片就看到问题了 undeclared identifier ‘unity_ObjectToWorld’ 然后我们打开shader这个Shader&#xff0c;你会看到一句这样的话 Upgra…

Idea项目yml文件发粉色变绿色方法

一.问题背景&#xff1a; 今天在冲git上拉代码下来遇到一个特别有意思的问题&#xff0c;简单的记录一下。 1&#xff1a;我像往常一样拉代码下来本地&#xff0c;用IDEA打开项目&#xff0c;file中新建yml文件全部是粉红的&#xff0c;如图&#xff1a; 说下自己怎么解决的&…