kuvalda
Posts: 0
Joined: Thu Oct 24, 2013 2:15 pm

Sliding Panel menu button with data-icon="bars"

I am designing a page with sliding panel menu that I would like to show/hide when user taps on the Menu button in the page header.

I would like to use the standard jquery bars icon for the Menu button (data-icon="bars"), however, it looks like I can't select that icon from the list of available button icons.

This icon comes with jquery css. Can you please advise how can I set this (or another custom icon) for a button?

Thank you.

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Sliding Panel menu button with data-icon="bars"

Hello,

Can you provide code example that you are using?

kuvalda
Posts: 0
Joined: Thu Oct 24, 2013 2:15 pm

Sliding Panel menu button with data-icon="bars"

This is the code that was generated from the UI builder:

code
<!-- Panel -->
<a data-role="button" name="Panel" dsid="Panel" class='ui-btn-left Home_Panel'
id="Home_Panel" data-corners="true" data-icon="grid" data-iconpos="left" x-apple-data-detectors="false"
data-inline='true' data-mini='true' data-theme="a" tabindex="3">
Menu
<&#47;a>
/code

If I try editing the code to set data-icon="bars" then I can see the new icon just fine, but the source gets out of sync with the UI builder so I can no longer use drag and drop.

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Sliding Panel menu button with data-icon="bars"

Add this attribute for Button in More properties option:
Image

kuvalda
Posts: 0
Joined: Thu Oct 24, 2013 2:15 pm

Sliding Panel menu button with data-icon="bars"

That was easy :) Thank you!

m z
Posts: 0
Joined: Sat Nov 02, 2013 1:39 am

Sliding Panel menu button with data-icon="bars"

This seems to work okay with the flat-ui theme. However, it does not work with ios7 theme. The space for the icon is there, but you can't see the bars.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Sliding Panel menu button with data-icon="bars"

Hello! In font set for ios7 theme there is no icon "bars". You would need to edit ios7.css file on Source tab to add this icon.

m z
Posts: 0
Joined: Sat Nov 02, 2013 1:39 am

Sliding Panel menu button with data-icon="bars"

Can you share the modification I would need to make to the source code to include the bars icon? I reviewed the flat-ui and ios7 .css files and could not find a difference for the bars icon code.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Sliding Panel menu button with data-icon="bars"

Hello! We reviewed this theme more and looks like there is some problem exactly with this icon. It's reported as a bug and will be fixed. We're going to create tutorial on how to add icons to a theme.

Return to “Issues”