Can only add icons in Framework 7 buttons when links

[Shaul_H_]

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.
 

[Diego_Calp]

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]

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.