Button with image instead of icon?

Support
#1

Hi,
In Layout tab of screen, I want to display a clickable image, so I’m using the Button component instead of the Embedded component. However, I can only display icons from CUBA or from FontAwesome. Is there a way to specify an image to use instead? (image is on local server)

#2

Basically, I want an image button (a button with an image as its background).
Any help is appreciated.
-Mingle

#3

Hi,

you have two options:

  1. Use PNG icon for Button or LinkButton
  2. Use CSS class for LinkButton with background image

First of all, you have to create theme extension using Studio Action - Create theme extension. Next, you can add an image to the theme directory in the web module of your project. For example to: modules/web/themes/halo/icons.

To use PNG icon just set it to LinkButton icon attribute:


<linkButton height="100px"
            icon="icons/sample-image.png"
            width="100px"/>

To use CSS background set a stylename for LinkButton and define CSS rule for this stylename in the halo-ext.scss file of your extended theme:


<linkButton height="100px"
            stylename="custom-style-button"
            width="100px"/>


@mixin halo-ext {
  @include halo;

  .custom-style-button {
    background: url(icons/sample-image.png);
    background-repeat: no-repeat;
    background-position: center center;
  }
}

I’ve attached demo project so you can try it in action.

button-icon.zip (31.6K)

#4

Hi Yuriy,
Thanks so much! This is exactly what I’m looking for.

-Mingle