senchtouch自定义小图标(转)

yulingjia yulingjia     2022-09-15     161

关键词:

自定义图标的方法

Sencha touch自带图标有限,有时需要自己添加图标。下面介绍自定义图标的方法:
首先需要生成图标字体。有许多网站提供在线生成图标字体的功能,比如IcoMoon,通过这个网站,你可以选择自己需要的图标,然后打包下载下来。
 
1、进入IcoMoon,看到如下图的页面,点击"Custom Built and Crisp Icon Fonts, Done Right"

 

2、选择需要的图标,点击下面的"Font>",即生成字体

 

3、点击"Download",即可下载

 

4、有了字体,我们就可以添加到我们的webapp中去了。
进入目录{webapp}/resources/fonts/(没有就创建),新建一个文件夹,比如"iconmoon",把第三步中下载的字体压缩包\fonts底下的四个文件解压到这个文件夹下。
5、记事本打开{webapp}/resources/sass/config.rb,添加下图的代码
提示: 因为我们加了一句 fonts_path, 最后生成css的时候可能会报错"Pictos fonts not found"。所以把 {webapp}/touch/resources/themes/fonts/pictos文件夹复制到{webapp}/resources/fonts/目录下。

这时候{webapp}/resources/fonts/目录下应该有如下结构:

 

6、记事本打开{webapp}/resources/sass/app.scss,添加下图的代码

'\e600'就是图标

 

 

7、重新编译生成新的app.css文件(将SASS, 即 scss 文件,编译成css文件)
进入cmd,执行:
编译css,需要compass这个命令行工具,执行gem install compass安装
cd {webapp}\resources\sass
compass compile
成功后会有如下提示,说明已成功生成新的app.css
 
 
 
总结:
  • 使用一个在线工具生成图标字体,如IcoMoonFontello
  • 将4个字体文件放到 {webapp}/resources/fonts/底下
  • 在config.rb中添加fonts_path,以便Compass编译的时候可以找到你的字体
  • 复制{webapp}/touch/resources/themes/fonts/pictos 到 {webapp}/resources/fonts,避免编译的时候找不到默认pictos字体而报错
  • 在app.scss中Import你的字体
  • Compass编译
 

推荐几个查看和编辑字体的工具:

1、FontGrapher:支持ttf,不支持svg、woff和woff2

2、FontLab Studio:支持ttf,不支持svg、woff和woff2

3、FontForge:支持ttf、svg、woff,不支持woff2

自定义edittext实现一键删除数据

...请注明出处http://blog.csdn.net/xiaanming/article/details/11066685自定义EditText带删除小图标,实现的功能:   点击删除小图标,删除当前输入框中所有内容   删除图标默认不显示,当输入框获得焦点后显示,实现的操作:在Edittext的DrawableRi... 查看详情

easyui导航菜单如何使用自定义图标

参考技术A自定义图标很简单,你可以打开easyui中的icon.css这个文件看看他的图标类是如何定义的就明白了,自己准备一个16×16的png小图标,然后在icon.css里面增加你自己定义的图标类就可以了。 查看详情

在 Flutter 包中使用自定义图标字体显示问号而不是自定义图标

】在Flutter包中使用自定义图标字体显示问号而不是自定义图标【英文标题】:UsingacustomiconfontinaFlutterpackagedisplaysQuestionmarksinsteadofcustomicons【发布时间】:2021-10-3118:36:07【问题描述】:我有一个由许多不同的Dart和Flutter包组成的应... 查看详情

工具栏的图标太小怎么弄大

...工具栏空白处(地址栏上面的空白处)点右键------找到自定义----你就可以选择大图标和小图标了,选中后点重置,就OK了,祝你成功!参考技术A工具栏的图标调整方法;1.变大:1)右击任务栏,2)“属性“3)任务栏外观里有一... 查看详情

顶部面板中 Gnome Shell 扩展的自定义图标不可见

】顶部面板中GnomeShell扩展的自定义图标不可见【英文标题】:CustomIconforGnomeShellExtensioninTopPanelnotvisible【发布时间】:2020-07-2906:42:27【问题描述】:我尝试为我的GNOMEshell扩展使用自定义SVG作为顶部面板中的状态图标。但自定义图... 查看详情

如何为小部件创建自定义布局

】如何为小部件创建自定义布局【英文标题】:Howtocreatecustomlayoutforwidget【发布时间】:2014-11-0713:24:07【问题描述】:我正在尝试在QT中创建一个看起来像这样的自定义小部件:红色方块将显示图像/图标。如何通过对小部件进行... 查看详情

c#自定义文件图标双击启动(修改注册表)

程序生成的自定义文件,比如后缀是.test这种文件怎么直接启动打开程序,并打开本文件呢1、双击打开2、自定义的文件,有图标显示3、自定义的文件,点击右键有相应的属性后台代码:(如何在注册表中修改信息)//工具启动... 查看详情

微信公众号自定义菜单栏如何加emoji表情等图标

...要的表情并进行复制粘贴使用;参考技术A微信公众号自定义菜单栏如何加emoji表情等图标这个问题我之前遇到过,挺容易解决的,接下来就跟大家讲讲应该怎么操作:工具:WIN10,小*蚂*蚁编辑器第一步:搜索微信公众平台并进... 查看详情

自定义 VSTS 发布任务:打包以及我的图标在哪里

】自定义VSTS发布任务:打包以及我的图标在哪里【英文标题】:CustomVSTSReleasetask:Packagingandwhereismyicon【发布时间】:2017-01-2519:06:43【问题描述】:我正在尝试发布VSTS的扩展;一个小的发布任务。我不打算公开发布此内容,仅供... 查看详情

cnblog博客园自定义样式修改标签页的icon图标

...一样的个性化icon图标呢?按照以下四步你也可以实现自定义标签图标。From  To 第一步:挑挑拣拣 选一张icon图标(尺寸不要太大)不然加载会很慢如果找到一个很满意的图片但是很大,那么到这里https://tinypng.com/&n... 查看详情

微信小程序自定义tabbar,附详细源码

参考技术A分享一个完整的微信小程序自定义Tabbar,tabbar按钮可以设置为跳转页面,也可以设置为功能按钮。懒得看文字的可以直接去底部,博主分享了GitHub地址。由于微信小程序自带的Tabbar功能比较单一,比如要做到中间是一... 查看详情

自定义element-ui中的图标(代码片段)

...入框里的用户名和密码的小图标就没有,这个时候可以自定义图标。<el-inputv-model="loginForm.username"placeholder="用户名"type="text"prefix-icon="el-icon-login-user"><el-inputtype="password"placeholder="密码"v-model="loginForm.password"@keyup.enter.native="logi... 查看详情

苹果ios14小组件在哪里设置

...现在桌面上,也可以移动小组件的位置。ios14小组件除了自定义桌面图片之外,还可以更换图标,使得每个软件图标都有不一样的变化,让你的桌面焕然一新,这里需要使用快捷指令来完成,ios14小组件怎么更换图标?怎么设置?... 查看详情

在 Dojo 中创建自定义小部件时遇到错误,无法确定错误原因

】在Dojo中创建自定义小部件时遇到错误,无法确定错误原因【英文标题】:facingerrorwhilecreatingcustomwidgetinDojo,couldnotidentifythereasonfortheerror【发布时间】:2020-01-2408:04:57【问题描述】:我创建了一个自定义小部件,用于在您单击图... 查看详情

Flutter 多自定义图标未显示在地图视图上

】Flutter多自定义图标未显示在地图视图上【英文标题】:Fluttermulticustomiconsarenotshowedonthemapview【发布时间】:2021-12-1804:14:05【问题描述】:我试图在地图视图上显示多个自定义图标,并尝试处理图标大小(iOS案例)。我编写的代... 查看详情

用于自定义 mule 连接器开发的自定义图标

】用于自定义mule连接器开发的自定义图标【英文标题】:CustomIconforcustommuleconnectordevelopment【发布时间】:2016-09-1306:27:17【问题描述】:我需要更改自定义连接器的默认图标。我尝试了@icon,但不支持308版本。但它正在为3.6版本... 查看详情

自定义颤振图标位置

】自定义颤振图标位置【英文标题】:CustomFlutterIconposition【发布时间】:2019-11-0708:35:39【问题描述】:我正在尝试添加自定义图标(FontAwesomeLight)。我已经尝试过执行此操作的软件包,但仅适用于免费图标。我遵循了这个教程... 查看详情

自定义 NavigationView 图标

】自定义NavigationView图标【英文标题】:CustomNavigationViewIcons【发布时间】:2021-11-1815:08:52【问题描述】:我想为NavigationView项制作自定义彩色图标。我从旧帖子中添加了一些代码,如下所示。<winui:NavigationViewItemx:Uid="Shell_Main"hel... 查看详情