How to make a Ajax Submit Button with an html tag inside the label

Question

i want add fontawesome icon in ajaxsubmitbutton,

<?php echo CHtml::ajaxSubmitButton('<i class="fa fa-plus"></i> Print Preview',
array('ma/select'),
array(  'success'=>'reloadGrid',
        'error'=>'js:function(data){
            alert("Please select checkbox");
            return false;
        }'),
array(  //'encodeLabel'=>false,
        'class'=>'btn btn-success',
        )); ?>

i have try to set encodeLabel to false, and try encode to false, all of them doesn't work,
does anyone know how to about that??? thank you

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

Why do you use encodeLabel? The problem is that FontAwesome stylesheets use before pseudo-elements to add icon.

:after and :before pseudo elements, they can only be put on container elements. Why? Because they are appended inside that particular element. input is not a container. button for instance is hence you can put them on.

echo CHtml::ajaxSubmitButton( '&#xf067; Print Preview ', $url, array(),
 array('encode'=>false)
)

And in CSS something like this:

input[type="submit"] {
  font-family: FontAwesome, 'Ubuntu', sans-serif;
}

For further reference check this: How do I add a Font Awesome icon to input field?

edited May 23 '17 at 12:19

Community

1
1

answered Sep 21 '16 at 14:28

Andy Theos

3,216
1
15
24

i have try from that answer, but doesn't work for ajaxsubmitbutton – Yanuar Ihsan Sep 22 '16 at 01:23
Check and try updated answer then, this will generate a font awesome icon on `input` – Andy Theos Sep 22 '16 at 08:48

How to make a Ajax Submit Button with an html tag inside the label

1 Answers1