开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在ionic中定位按钮文本旁边的图标

在Ionic中定位按钮文本旁边的图标可以通过使用Ionic的内置图标库和CSS样式来实现。以下是一种常见的实现方式：

首先，确保你已经在Ionic项目中引入了Ionic的图标库。你可以在index.html文件中的<head>标签内添加以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

在你的HTML模板文件中，使用Ionic的ion-icon组件来添加图标。例如，如果你想在一个按钮旁边添加一个定位图标，可以这样写：

<button ion-button>
  <ion-icon name="locate"></ion-icon>
  定位
</button>

这里的name属性指定了要使用的图标名称，这里使用了locate图标。你可以在Ionic的官方文档中找到所有可用的图标名称。

如果你想调整图标和文本之间的间距，可以使用CSS样式来实现。例如，你可以在全局的CSS文件中添加以下样式：

button ion-icon {
  margin-right: 5px;
}

这样就会在图标的右侧添加一个5像素的间距。

以上就是在Ionic中定位按钮文本旁边的图标的一种实现方式。如果你想了解更多关于Ionic的开发技术和相关产品，可以访问腾讯云的Ionic产品介绍页面：Ionic产品介绍。

相关搜索:bootstrap将文本放在带圆圈的图标旁边居中 div中的图标定位-忽略文本空白 ionic 5按钮，带文本+图标，侧面有平齐图标 Ionic v1将图标放置在输入字段中或其旁边 Selenium python单击某个文本旁边的图标使用CSS定位输入字段旁边的按钮反应中的文本旁边的图标-选择多标签在css中文本区旁边对齐输入按钮在twitter按钮图标旁边显示点赞数量在文本旁边对齐字体强大的图标

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ionic之AngularJS扩展2 移动开发

可能你没有注意过，HTML中常用的script标签在AngularJS中被重新定义了：除了原来的脚本声明功能之外，如果script元素的type属性定义为text/ng-template，则被称为内联模板。例如：

02

如何设计出正确的搜索模式？

以下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。如果你正在阅读这篇文章，那么你一定正在设计一个有搜索功能的网站或应用程序。在这篇文章中，我将介绍5

06

PubMed专题：(二）搜索结果的阅读、筛选、下载、保存与利用

对文献检索来说，搜索是极为关键的第一步，直接决定了搜索结果里面有没有你想要的。因此，对PubMed搜索还不是很熟悉的读者，可以结合第一期推送教程，加以操作实练，相信定会掌握不少。

00

PubMed专题：(二）搜索结果的阅读、筛选、下载、保存与利用

对文献检索来说，搜索是极为关键的第一步，直接决定了搜索结果里面有没有你想要的。因此，对PubMed搜索还不是很熟悉的读者，可以结合第一期推送教程，加以操作实练，相信定会掌握不少。

05

Visual Studio 2008 每日提示(五)

#041、通过返回标记，在编辑器向前或向后定位代码原文地址：http://blogs.msdn.com/saraford/archive/2007/09/19/did-you-know-how-to-navigate-forward-and-backwards-in-the-editor-all-because-of-go-back-markers.aspx 操作步骤： 1、使用标准工具栏的“向前定位”和“向后定位”按钮。 2、快捷键：向后定位是“Ctrl+-(减号)”,向前定位是“Ctrl+Shi

06

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页（Home page）3 持久化数据保存4 总结

本文使用Ionic2从头建立一个简单的Todo应用，让用户可以做以下事情：查看todo列表添加新的todo项查看todo详情保存 todo到持久化存储 0 开始之前本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。 1 创建新的Ionic 2工程我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。运行以下命令创建新项目 ionic start ionic-todo blank --v2 一

05

PWA入门：手把手教你制作一个PWA应用

Web前端的同学是否想过学习app开发，以弥补自己移动端能力的不足？但在面对一众的选择时很多同学略感迷茫，是学习ios还是android开发？是学习原生开发、混合开发（比如：Ionic)，还是使用react native或者flutter这样的跨平台框架？而app开发的学习周期长、学习成本高也让一部分人望而却步。得益于前端技术的飞速发展、浏览器性能的不断提高，使用网页技术开发出接近原生体验的应用得以变为现实，PWA就在这样的背景下应运而生。可以用自己熟悉的HTML、CSS、Javascript开发出媲美原生app的网站，不仅拥有接近原生app的流畅程度，并且具备一些原生app才有的特性，比如：a. 可以在主屏上安装应用图标，b. 离线状态下访问，c. 获取消息通知，等等。。PWA的出现让大家看到了希望！

04

一个创建产品动画说明视频的新手指南

英文原文：A Step-by-step Guide to Creating Animated Product Explainer Videos

01

Google Earth Engine（GEE）——GEE最全介绍（7000字长文）初学者福音！

code.earthengine.google.com 上的地球引擎 (EE) 代码编辑器是用于地球引擎 JavaScript API 的基于网络的 IDE。代码编辑器功能旨在快速轻松地开发复杂的地理空间工作流程。代码编辑器具有以下元素（如图 1 所示）：

01

9个值得推荐的 VUE3 UI 框架

Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。

03

chrome扩展开发中文教程-1

在这一节中，将编写一个browser action扩展，这个扩展会在谷歌浏览器的工具栏上增加一个图标。

04

Figma技巧超全合集！40+隐藏技能！快收藏！（第一辑）

静电说：今天为大家带来了超全的Figma技巧合集，足足有40多个哦！这次算是最全的技巧文章了，建议收藏下来慢慢看~今天是第一辑，下周我们发第二辑。

03

iPaste 产品设计

该产品尽量使用图标,一是避免国际化的麻烦,而是为了语义化更强.少占用空间.难点在于接管系统的粘贴板数据,有可能获取不到历史粘贴板数据,只能获取最新的.不过浏览器插件的话应该有更高的权限说不定可以获取的到.另外就是提示用户插件接管粘贴板数据.另外需要考虑操作区域可以自定义背景色,显示那些字段.

02

填一填用了半个月 ionic 遇到的坑

这篇没什么东西可扯，基本是 Q&A 形式。不定时更新，不用 Ionic 了就不更新。。。

04

Figma中的自动布局要怎么用？一篇文学会官方说明文件

静电说：Figma在最近的几次更新中，发表了全新的Auto Layout（自动布局）功能，要知道，在之前的自动布局功能中，我们只能使用很简单的布局效果（类似于Sketch中的自动布局），而本次Figma在更新后，自动布局更加的完善好用，可以做出非常多的响应式效果。

01

Spring Boot 之 MVC1、新建工程2、依赖更新3、编写Controller4、准备Model数据，映射请求路径5、配置JSP模版6、渲染输出

上一次我们使用Spring Boot开发了一个简单的REST服务应用，那么传统网页应用怎么做呢？渲染HTML是Spring Boot可以完美胜任的，并且提供了多种模板引擎的默认配置支持，所以在模板引擎的支持下，我们可以很快的上手开发动态网站。 Spring Boot提供了默认配置的模板引擎主要有以下几种： Thymeleaf FreeMarker Velocity Groovy Mustache Spring Boot建议使用这些模板引擎，避免使用JSP，但JSP有天然的血缘关系，我们教程也是从最简便的

05

如何写好css系列之button

现代前端行业的发展，如果你在css的时候，还没有利用一些预编译工具，是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要，因为基础有boostrap，组件库有：easyui，elementui，iview，ionic等等。但我个人练习自己如何写好一个css框架，对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。一、与美术交流获取得这些信息 1. 按钮状态：普通状态、鼠标悬停、选中状态、禁用状态 2. 按

07

IDEA 的 DataGrip 太吊了

最近看到一款数据库客户端工具，DataGrip，是大名鼎鼎的JetBrains公司出品的，就是那个出品Intellij IDEA的公司。

03

发现一款好用到爆的数据库工具，被惊艳到了！

最近看到一款数据库客户端工具，DataGrip，是大名鼎鼎的JetBrains公司出品的，就是那个出品Intellij IDEA的公司。

02

9 个值得推荐的 VUE3 UI 框架

本文推荐几个比较流行的VUE3 UI框架，同时提供出色的开发人员体验，合理利用，又或者学习借鉴都是不错的选择，排名不分先后。

03

JetBrains出品，一款好用到爆的数据库工具，惊艳到了！！！

最近看到一款数据库客户端工具，DataGrip，是大名鼎鼎的JetBrains公司出品的，就是那个出品Intellij IDEA的公司。DataGrip是一款数据库管理客户端工具，方便连接到数据库服务器，执行sql、创建表、创建索引以及导出数据等。之前试用的客户端工具是dbvisualizer，但是在试用了DataGrip以后，我就决定抛弃dbvisualizer。

01

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

今天，我们使用REST API实现用户名密码认证，服务端端点如下： Endpoint 请求响应 /login { username: '',password: '' } auth_token /logout add a token to headers /register { username: '', password: '' } 1、创建Ionic 2 APP 反复练习，应该是很熟悉了： ionic start Ionic2RestAuth --v2 我习惯上会先启动看看，确保项目创建成功： c

03

Android标题栏上添加多个Menu按钮的实例

最近项目中碰到要在Android Menu旁边再添加一个按钮,而不是点击menu按钮然后在弹出一些选项.

02

Spread for Windows Forms快速入门(5)---常用的单元格类型（下）

在上一篇，我们介绍了常用了文本类型单元格。除了文本型单元格外，Spread还支持如下13种图形单元格类型：组合框单元格、按钮单元格、复选框单元格、超链接单元格、进度条单元格、条码单元格、颜色选择器单元格、图片单元、列表框单元格、复合列组合框单元格、复合选项单元格、富文本单元格、滚动条单元格等。下面我们介绍前五种的基本用法。组合框单元格ComboBoxCellType 你可以使用一个组合框单元格以显示一个可编辑的下拉列表，用户通过在显示的列表中进行选择完成对值的输入。你可以指定项目的列表是否包括显示伴随文字

06

一个免杀钓鱼思路分享

左侧的文件是真实文本文件。右边的文件是PowerShell有效负载，两者看起来基本一模一样，可以看到都是.txt的文件名。打开我们的木马文件跟我们打开笔记本应用没有任何分别。但是我们的木马在后台悄悄执行了。CS MSF等等C2正常上线。1.生成shellcode1.我们使用CS MSF等等C2生成的powershell等shellcode.这里使用MSF演示

01

2021年最佳VUE3 UI框架推荐

Vue3已经发布一段时间了，版本趋于稳定并且可以用于生产。虽然很多开发人员对这个版本褒奖不一，新版本由于算是重新构建生态系统，相关资源的缺乏。与Vue2丰富的UI框架相比，Vue3就显得有点少，也算是影响开发人员使用Vue3的原因之一。

02

绝无仅有！2019年最全的UI设计之输入字段剖析

以下内容由摹客团队翻译整理，仅供学习交流，摹客iDoc是支持智能标注和切图的产品协作设计神器。

02

再见，Navicat！同事安利的这个IDEA的兄弟，真香！

其实，这个标题的话肯定会引出一些杠精，为了不给杠精留机会，多做一点说明：「Navicat 和 DataGrip 都是非常优秀的数据管理工具，各有所长，这里就不做对比了！你喜欢什么样的风格用什么样的产品，就我个人而言更喜欢 DataGrip 一些。」把杠精安排的明明白白！

01

DataGrip 保姆级教程！

点击上方蓝色字体，选择“设为星标” 回复”学习资料“获取学习宝典来源：https://www.cnblogs.com/zuge/p/7397255.html DataGrip使用入门最近看到一款数据库客户端工具，DataGrip，是大名鼎鼎的JetBrains公司出品的，就是那个出品Intellij IDEA的公司。 DataGrip是一款数据库管理客户端工具，方便连接到数据库服务器，执行sql、创建表、创建索引以及导出数据等。之前试用的客户端工具是dbvisualizer，但是在试用了DataGr

01

IDEA 官方数据库管理神器，比 Navicat 还香？

Atzuge|https://www.cnblogs.com/zuge/p/7397255.html

01

低码实战 | 使用CMS内容管理导入数据，实现根据条件查询

日常我们作为个人账户开通腾讯云微搭低码功能后，可以有两个应用的创建权限，那我们今天就充分利用这两个资源，打造一款属于自己的在线预约小程序。

03

新手Web设计师应该避免的 6 宗罪

新手Web设计师和开发人员往往以有缺陷的创作而告终，却不知道真正的故障出自于哪里。虽说有这么多的设计书籍，但即使都读了，也不会对最后的设计有任何意义。在第一个原型中创建一个无缝的设计真的是一个挑战——

07

使用微搭低代码平台开发天气预报应用小程序

查看每日的天气情况是我们在日常生活场景中的常见应用，本文就利用了腾讯云微搭低代码平台带领大家快速的搭建一款天气预报的小程序。

02

微搭低代码+CMS内容管理，从零构建预约+查询小程序

日常我们作为个人账户开通腾讯云微搭低码功能后，可以有两个应用的创建权限，那我们今天就充分利用这两个资源，结合微搭低代码深度集成的云开发CMS 内容管理系统，打造一款属于自己的在线预约小程序。

04

新手Web设计师应该避免的 6 宗罪

新手Web设计师和开发人员往往以有缺陷的创作而告终，却不知道真正的故障出自于哪里。虽说有这么多的设计书籍，但即使都读了，也不会对最后的设计有任何意义。在第一个原型中创建一个无缝的设计真的是一个挑战——事实上，只是做好单个部分就是一个难点。

02

Ionic3学习笔记（一）安装、项目结构与常用命令

创建一个新项目，有blank、tabs、sidemenu3种样式可选，tutorial、super、conference为官方Demo，aws为AWS Mobile Hub Demo

02

ionic2 （真正）修改应用图标和启动画面

今天在用ionic2 的ionic resources生成新的icon和splash，生成后安装，应用图标和启动画面依然没变化。。。不知道大家有没有被坑过，今天被坑了一下午，终于找到了办法：解决方法第一次使用ionic resources后根文件夹下会生成一个res文件夹，比如你的项目文件夹名是demo，那么就是demo/res文件夹。将res中的所有文件夹复制到demo\platforms\android\res下，res里面的同名文件夹覆盖（注意：保留该文件夹下原本的values文件夹和xml文

06

SNS项目笔记<一>--项目启动

在新版本下，ionic得到的健硕性的更新，angular却减少了自己的体积，正所谓：“ionic吃好了，angular减肥了”于是我们也可以抛弃以前的一些坑，直接进入流畅性的操作了。

02

ionic4自定义图标

ionic4的自定义图标使用方式与ionic3很大不同当前ionic4我只会一种使用方式，其它的还没空研究，操作上很简单: 1. 下载svg文件放在项目目录下，如assets/fonts下面，并

04

win10锁定计算机命令,锁定Windows 10 PC的10种方法

离开时，锁定Windows 10 PC是保护计算机安全的最佳方法。这不会退出或中断任何正在运行的应用程序，您必须输入PIN或密码才能通过锁定屏幕。您可以通过以下10种方式锁定计算机。

03

CorelDRAW 2019，软件应用项目（二）

今天我们响应老师的号召，给自己做一个名片，为了让我以后还能记得制作流程，我决定写一篇文章，来让份这份记忆持续下去，设计就是一点一滴积累出来的，首先要用好软件，其次，要培养审美，多看多想多分析，好作品就会在你的手上诞生。

02

WORD的基本操作（二）

开始---查找替换---查找\替换\定位---在查找内容区域输入需要查找\替换的文本

02

ionic 自动生成APP图标与启动界面原

(adsbygoogle = window.adsbygoogle || []).push({});

02

除了Navicat：正版 MySQL 客户端，真香！

点击上方“芋道源码”，选择“设为星标” 管她前浪，还是后浪？能浪的浪，才是好浪！每天 10:33 更新文章，每天掉亿点点头发... 源码精品专栏原创 | Java 2021 超神之路，很肝~ 中文详细注释的开源项目 RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析作业调度中间件 Elastic-Job 源码解析分布式事务中间件 TCC-Transaction

03

Android 9 Pie新版本入门

Android 9的昵称是“Pie”。这并不是最受欢迎的Android名称，但它最后将会变成一个最受欢迎的名称。说到底，真正重要的是“Pie”的新功能——而且有很多这样的功能。

03

Jump Start Bootstrap 第3章

在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件，Bootstrap可以简单和快速的帮我们在网站上添加这些功能。

02

Qt编写安防视频监控系统28-摄像机点位

摄像机点位的功能主要是在图片地图和在线离线地图上设置对应摄像机的位置，然后双击可以实时预览对应摄像机的视频，在图片地图上拖动摄像机图标到对应位置，系统会自动保存位置信息，在网页地图上的摄像机位置，需要异步更新，比如先从右侧选择需要更新位置的摄像机，然后在地图上鼠标按下，会自动传回当前位置的经纬度信息，然后单击更新设备位置按钮即可，会自动js异步更新执行代码，更新完成以后会自动同步到另外的地图，比如在线地图更新了，离线地图也会自动更新。

00

【开发指南】（四）Ionic3快速上手并了解这些

Ionic这几个网站是需要经常看的，应该了解过才执行后面步骤，其中强烈要求至少先撸一遍官网的组件和API文档。

02

Win 11 使用体验

教程 - Win 11 安装 wsa 安卓虚拟机 - 简书 https://www.jianshu.com/p/5e07a0e97a27

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭