Insert an icon and text in a call to action widget

Hello Dears,

I want to placed an icon of http://fontawesome.io/cheatsheet/ in a call to action botton,
also I want try it in to diferente ways to see if looks good in my desing:

  1. that the icon be add in “Title for the button” area, (so for example I can put: call me + fa-phone) - I already linked my phone
  2. that the icon goes instead of “Title for the button” area
  3. that the icon goes instead of “Enter your call to action” area

Also please help me in knowing how to change the size of the icon to make it fit well as I want to.

Thanks in advance for your help.
Best Regards
Diego.

Hello there,

To display an icon along with the CTA instruction, you can insert the icon HTML code. For instance, in the “Enter your call to action” you can have something like this:


Click this button to make a call <i class="fa fa-home"></i>

To display an icon along with the button label, you’ll need a couple of extra jQuery code since HTML code isn’t allowed in the “Title for the button” input field. Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'
   
   if( $('.sydney_action_widget').length ) {
   
      var btnLabel = $('.sydney_action_widget .roll-button').text();
      var icon     = ' <i class="fa fa-home"></i>'; // Font Awesome icon HTML

      $('.sydney_action_widget .roll-button').html(btnLabel + icon);
      
   }

})(jQuery);

  1. Update

To manage the font size, you can use the below CSS code:


.sydney_action_widget .promo-content .fa { 
  font-size: 40px;  
}

.sydney_action_widget .roll-button .fa { 
  font-size: 40px;  
}

To apply it to your site, add it to Appearance > Customize > Additional CSS.

I hope this reply helps.

Regards,
Kharis

Hello dear Kharis

Ok, I’m going to choose the javascript option, I didnt like the other option It does not look good.

I forgot to add that there are 2 buttons, because in the row I have 2 Call to Action (columns) widget, so basiclly what happened was that the texts of the two buttons were merged into a single text.

How can I fix it?

Best Regards.
Diego

Hello there,

To do modification on a specific CTA widget, you can assign a custom class name by editing your desired one, expand the Attributes tab, and then define a custom class name in the “Widget Class” input field. For example: my-cta

Then replace the jQuery code I suggested on the step 3 above with this one:


;(function($) {

   'use strict'
   
   if( $('.sydney_action_widget .my-cta').length ) {
   
      var btnLabel = $('.sydney_action_widget .my-cta .roll-button').text();
      var icon     = ' <i class="fa fa-home"></i>';

      $('.sydney_action_widget .my-cta .roll-button').html(btnLabel + icon);
      
   }

})(jQuery);

Then replace the custom CSS code with this one:


.sydney_action_widget .my-cta .promo-content .fa { 
  font-size: 40px;  
}

.sydney_action_widget .my-cta .roll-button .fa { 
  font-size: 40px;  
}

Regards,
Kharis

Hello Kharis, it works perfect. I appreciate it.

How can I change the default capital letter style used on the Buttons?

You’re welcome!

You can use this CSS code to disable the uppercase style.


.widget_sydney_action .roll-button {
  text-transform: none;
}

Regards,
Kharis

Thank you very much for your help dear friend,

I have not noted before but the font size of the text is not changing, only the icon size is changing.

Regards.
Diego

Hi Diego,

Please use this CSS code:


.sydney_action_widget .roll-promobox .title {
  font-size: 40px;
}

If you want to apply this on your specific widget identified its unique class name e.g. my-cta, use this code:


.sydney_action_widget .my-cta .roll-promobox .title {
  font-size: 40px;
}

Regards,
Kharis