用户或个人资料选项卡图标不可见

Posted 2023-02-25

【中文标题】用户或个人资料选项卡图标不可见

【英文标题】：user or profile tab icon is not visible

【发布时间】：2013-01-02 12:05:41

【问题描述】：

我是 sencha touch 的新手，想要三个标签图标，即Home, Profile/User and Camera。 home 图标当前可见，但 Profile/User 不可见。如何将profile/user 和camera 的图标添加到sencha touch 的选项卡中？

这是我的 Profile.js 代码

Ext.define('find.view.Profile' , 
extend: 'Ext.Panel',
xtype: 'profile',

config: 
    title: 'Profile',
    iconCls: 'user',
    layout: 'fit',
    scrollable: true,
    stylehtmlContent: true,
    styleHtmlCls: 'profilepage',
    html: ['<h1>Profile</h1>'].join('')

);

【问题讨论】：

您是否使用 tabpanel 作为父级？

现在用户工作正常。但我正在为相机图标而苦苦挣扎。你能告诉我相机的类名是什么吗？我正在尝试这些课程cam, camera, photo, pic, picture，但它们都不起作用。

【参考方案1】：

您需要使用pictos。在此之前，您需要安装Ruby，以及Sass 和Compass。按照本教程添加新的图标掩码：

http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application

【参考方案2】：

您可以在 ST 应用中使用的所有图标都位于该目录中

resources/themes/images/default/pictos

但是，并非所有内容都默认包含在您的应用程序主题中。 为了包含那些额外的图标，您需要包含该行

@include pictos-iconmask(<YOUR_ICON>);

在您的 app.scss 文件中，然后使用 COMPASS 编译主题。 如果您对 Sencha Touch 完全不熟悉，我强烈建议您观看以下来自 SenchaCon 2011 的视频，了解如何为 ST 应用设置样式。

http://docs.sencha.com/touch/2-1/#!/video/theming

PS：请注意，“pictos-iconmask”mixin 仅适用于 ST Pictos Font，它已被弃用。

【讨论】：

我使用的是sencha touch 2.1，资源文件夹中没有主题文件夹。

那么事情就搞砸了！该文件夹是“主题”而不是“主题”。再次下载 ST SDK，解压，你会看到上面提到的文件夹。

【参考方案3】：

相机不能作为 iconCls 使用。支持以下图标 (seen here)：

action
add
arrow_down
arrow_left
arrow_right
arrow_up
bookmarks
compose
delete
download
favorites
home
info
locate
maps
more
organize
refresh
reply
search
settings
star
team
time
trash
user

要设计自己的图标样式，请查看 @Andrea Cammarata 和 @user1479606 答案

【参考方案4】：

如果你想添加自定义图标（未在 pictos 中列出）使用这个 css 代替 somename name 使用你的名字作为图标

.x-tab .x-button-icon.somename,.x-button .x-button-icon.x-icon-mask.somename-webkit-mask-image:url('path-to-image/facebook-icon.png')

并将其用作

iconCls: 'somename',