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

shaulhadar
439 Posts
shaulhadar posted this 01 October 2014

Hi Themeler Team. Please add an option to add an icon to the buttons. It will be great, and you already have fontawesome implemented.

Thanks for your time,
Shaul.

Hi Themeler Team. Please add an option to add an icon to the buttons. It will be great, and you already have fontawesome implemented. Thanks for your time, Shaul.

Last edited 02 October 2014 by Support Team

Vote to pay developers attention to this features or issue.
22 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 01 October 2014

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 Shaul, you may add image background for the Button Control. Select the Button control, open Background option ![](http://attachments.answers.billiondigital.com/452/452/ButtonBGImage.png) On the Image tab you may select background image for the button. Here is the result: ![](http://attachments.answers.billiondigital.com/453/453/ButtonBGImage1.png) regards, Aileen
shaulhadar
439 Posts
shaulhadar posted this 02 October 2014

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.

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.
Support Team
Support Team posted this 02 October 2014

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

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

Aleh
84 Posts
Aleh posted this 02 October 2014

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

Also we will add Icon options for Button control within one or two weeks.
Support Team
Support Team posted this 03 October 2014

This option should be available next week:

This option should be available next week: ![](http://attachments.answers.billiondigital.com/466/466/button-icon.png)
shaulhadar
439 Posts
shaulhadar posted this 04 October 2014

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

Shaul.

Wow, great, that's exactly what i ment! Thanks and have a great day :) Shaul.
Support Team posted this 07 October 2014

Actually this feature is online and ready to use

Actually this feature is online and ready to use
dpodesta
79 Posts
dpodesta posted this 07 November 2014

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

Can you have the icon on the right instead of left?
Support Team
Support Team posted this 07 November 2014

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

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. ![](http://attachments.answers.billiondigital.com/628/628/icon-align.png) Sincerely, Hella BillionDigital Team
Support Team
Support Team posted this 19 November 2014

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

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: <img src="http://attachments.answers.billiondigital.com/733/733/button-icon-position.png" alt=""> <br> Thank you, Olivia
Stagger Lee
1838 Posts
Stagger Lee posted this 11 February 2015

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...

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...
Support Team
Support Team posted this 11 February 2015

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

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
Stagger Lee
1838 Posts
Stagger Lee posted this 11 February 2015

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 "&lt;i class=&quot;xxxxxxxxxx &gt;&lt;/i&gt;&quot;, 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....

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 `"&lt;i class=&quot;xxxxxxxxxx &gt;&lt;/i&gt;&quot;`, tell them just to use &quot;:before&quot; and &quot;:after&quot; 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 &quot;:before&quot; and &quot;:after&quot; 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....

Last edited 11 February 2015 by Stagger Lee

Support Team
Support Team posted this 11 February 2015

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

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
Stagger Lee
1838 Posts
Stagger Lee posted this 11 February 2015

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 &lt;i class=&quot;xxxxxxxxxx &gt;&lt;/i&gt;

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.

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 `&lt;i class=&quot;xxxxxxxxxx &gt;&lt;/i&gt;` 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.
Support Team
Support Team posted this 12 February 2015

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

Hi, In fact, the icon html elements, e.g. `<i class="icon-adjust"></i>` use the following css; <pre> .icon-adjust:before { content: '\23f'; } </pre> 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: <pre> .bd-icon-19:before { content: '\1d7'; } </pre> 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
Stagger Lee
1838 Posts
Stagger Lee posted this 15 February 2015

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.

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.

Last edited 15 February 2015 by Stagger Lee

Support Team
Support Team posted this 16 February 2015

Hello

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

Thank you,
Olivia

Hello I think I understand your idea. I've added your request to our wish list. Thank you, Olivia
Stagger Lee
1838 Posts
Stagger Lee posted this 07 April 2015

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

Did you removed icons from buttons ? I cant find it in options.
Support Team
Support Team posted this 08 April 2015

Hi,

The option is still there:

button-icon.png

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

Hi, The option is still there: !button-icon.png! 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
You must log in or register to leave comments