Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Shaul_H_
Beginner
94 Views

Can only add icons in Framework 7 buttons when links

Hello, I am using the buttons for framework 7 inside the xdk. I want to add an icon to one of the buttons, but this option only shows when the button is a link.  but when its a link, it looses all its styles.  How can i add an icon but also show the button styles?

 

Thanks,

Shaul.
 

Tags (2)
0 Kudos
2 Replies
Diego_Calp
Valued Contributor I
94 Views

Hi Shaul,

You may add the icon manually in index html.

After place the button and set all properties, you get something like this:

<a class="widget uib_w_6 d-margins button button-big button-round button-fill color-green" data-uib="framework7/button" data-ver="0" id="boton">
<span>My button!</span>
</a>

Insert manually the icon tags before the span text tags:

<a class="widget uib_w_6 d-margins button button-big button-round button-fill color-green" data-uib="framework7/button" data-ver="0" id="boton">
<i class="icon-f7 icon" data-position="left"></i>
<span>My button!</span>
</a>

In my test, after this, there is no problem in XDK designer, the icon appears and the button properties remain as set.

Regards

Diego

Zhen_Z_Intel
Employee
94 Views

Hi, Shaul. The reason would be once you add an icon for button, the class of this button would be change from "widget uib_w_* d-margins button" to "widget uib_w_* d-margins link". The easiest way is to make sure the button always uses the style of button instead of link. You can fix the class name manually. Hope it could help you.

Reply