Please add an option to add an icon or image to buttons

Hi Shaul,
you may add image background for the Button Control. Select the Button control, open Background option

On the Image tab you may select background image for the button.
Here is the result:

regards,
Aileen

Hi Aileen, thanks for that. I was actually referring to font icons, like fontawesome... the same element you put already inside themeler. I have attached for you an image that shows what i mean.

Thanks so much for your time,
Shaul.

Hello

As far as I remember you're using WordPress. You can use special shortcode to create button with icon.
For example:

[button icon="icon-search"]Button with Icon[/button]

This shortcode can be used in WP(and Joomla) only.

bootstrap button:

<a class="btn btn-default btn-lg active" role="button" href="#"><i class="icon-adjust"></i> Bootstrap button with icon </a>

default button

<a href="#" class="bd-button"><i class="icon-adjust"></i> Button with icon 2</a>

For more information please open Shortcodes menu in Themler Property Window >> Button and Icon

Thank you,
Olivia

Last edited 02 October 2014 by Support Team

Also we will add Icon options for Button control within one or two weeks.

This option should be available next week:

Wow, great, that's exactly what i ment!
Thanks and have a great day :)

Shaul.

Actually this feature is online and ready to use

Can you have the icon on the right instead of left?

Hi,

You can press on the customize icon near the ICON menu, in the next menu switch to the Custom tab and set the Float to Right.

Sincerely,
Hella
BillionDigital Team

Hello

In the new Themler update we've added the Button Icon position option to the first level of the Button properties in the Property Window:

Thank you,
Olivia

Font Awesome icons could easy be added in all blocks with :before, :after. Not just menus and buttons.
And with simple CSS margin, colorized, size, etc...

Hello

BillionThemler icons can be added to any element manually in the same way as Font Awesome icons:
http://answers.billiondigital.com/articles/3942/icons-shortcode

Thank you,
Olivia

I meant in Themler, not manually. Not so big deal for your coders because it exist already in CSS standard. As something new you give to your subscribed users. If your coders find it right now to demanding to make it in HTML output as "<i class="xxxxxxxxxx ></i>", tell them just to use ":before" and ":after" and pull svg icons via css file. they will know what it is all about.

this way people could put font awesome icons everywhere, almost every block.

rest is simple css, margin, font-size, padding, color, hover color, etc....
class `, tell them just to use ":before" and ":after" and pull svg icons via css file. they will know what it is all about. this way people could put font awesome icons everywhere, almost every block. rest is simple css, margin, font-size, padding, color, hover color, etc....

What exactly you're trying to achieve?

If you want to add icon as separate control please use Insert >> Navigation >> IconLink control. It uses the same library of icons. This control can be added anywhere on the page.
http://answers.billiondigital.com/articles/4758/icon-link

I see now, missed it. Thank you. There is much to learn.
Icons are not displayed with inline or inline-block with different blocks. And was trying to have icons in "Default styles" on different block, but option is grayed.
There is already that option, to upload own icons as images. Just say to your coders to twist logic a bit and use SVG icons.
Principle is the same, almost same standard.

With time when Themler develop in the future one day one simple option to upload own SVG files can remove all options for own small icons as images. Less HTTP requests too.

This is code Artisteer do without problems, it is pure simple CSS standard:

 .sometest-blockheader .t:before
    {
       content:url('images/blockheadericon.png');
       margin-right:6px;
       bottom: 3px;
       position:relative;
       display:inline-block;
       vertical-align:middle;
       font-size:0;
       line-height:0;
    }

This would be change to make it possible to use SVG icons without more difficult to implement use of <i class="xxxxxxxxxx ></i>

class .sometest-blockheader .t:before
{
content:'\f03e';
font: normal 20px/1 'FontAwesome';
margin: 0 6px 0 0;
display:inline-block;
color:#333333;
}

Something like that, so simple.
Just call SVF fonts from functions.php globally and use :after, :before everywhere you can. No more need for small icons upload from computer. Less HTTP requests.

Hi,

In fact, the icon html elements, e.g. <i class="icon-adjust"></i> use the following css;

.icon-adjust:before {
  content: '\23f';
}

just like in case with FontAwesome. Themler just have own web font called "Billion Web Font".
The same icons are used for IconLink control. For example, the FB icon used by IconLink control by default uses the following css:

.bd-icon-19:before {
content: '\1d7';
}

In other words, wherever the icons are used (IconLink, bullet list, menus, etc) they are vector font icons.

Is it what you mean?

Thank you,
Olivia

OK, this is nice. Then use it for all block everywhere. You can use same SVG icons on all imaginable places in theme. Just dont use SVG CSS file, use main theme style.css for that.
For instance (info/error blocks with background colors, WP messages under typography)

.just-example-error .bd-icon-19:before 
{ 
content: '\1d7'; 
}

In style.css, dont touch CSS in SVG icons folder.

Hello

I think I understand your idea.
I've added your request to our wish list.

Thank you,
Olivia

Did you removed icons from buttons ? I cant find it in options.

Hi,

The option is still there:

It's available for buttons added as controls under Insert section.

If you need to add icon to ALL buttons as default button style you can add this icon as background image.

Thank you,
Olivia