Adding an icon to the form submit button.

I ended up editing the parent theme… framework/php/class-form-generator.php

Line 322
Replace the <input> tag with <button>HTML that to display</button> leave all of the

The <input> is just too limited to work with using jQuery or Javascript. The value=”” attribute doesn’t do well with HTML.

I found the easiest way to get the desired HTML ( a button with an icon ) with the minimal CSS styling adjustments, was to inspect an existing button in the chrome debug window.

Copy the element at this parent div: <div class="avia-button-wrap avia-button-center el_after_av_hr avia-builder-el-last main_btn">
Remove the identifying class e.g. “avia-builder-el-48″ if your choose to”
The I removeded the href="" and change the <a> tags to <span> tags.

One draw back that I haven’t solved is that the page will now refresh on “SUBMIT.” I don’t feel it is essential to this project but it would be nice to figure this out for the future. It is a bummer that I will have to update the parent everytime…

I used the following CSS to stop the unwanted styling effects:

.avia_ajax_form .button {
    margin: 0;
    padding: 0;
    border-radius: 2px;
    border-bottom-width: 0;
    border-bottom-style: none;
    font-weight: 700;
    font-size: 0.92em;
    min-width: 142px;
    outline: none;
}
.main_color .button:hover {
background:white;
}

Finally I added a class, “someclass”, after class="avia_iconbox_title someclass" like this to finish the styling.

@Guenni007 if you are asking how I added the symbol I want to the framework PHP, the simple answer is I copy and paste it.

For example the code below gives me the right arrow icon:
<span class="avia_button_icon avia_button_icon_right" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>

In order to get the code above in the first place, I create a normal button or stand alone inline icon. Then I “publish/preview” the page. Inspect the icon with the debugger and copy the element.

The problem is that the icon character (the square gylph), data-av_icon="" isn’t found until enfold runs it through its fontello code, so that is the easiest way to figure out the proper value for data-av_icon="".

Now I see what you are saying. I still think you need to edit the framework file to make that input into a <button></button> tag. The form button field (RED ARROW from your image) is placed into <input type="submit" value="Submit <span class="avia_button_icon avia_button_icon_right" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>"/>

Am I correct in saying you are getting this: Submit <span class="avia_button_icon avia_button_icon_right" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> instead of this Submit >.

Again the root of the problem is trying to put HTML into a data-attribute, which we are limited to with an <input/> tag.

This StackExchange answer may be what you are looking for https://stackoverflow.com/questions/5823835/html-in-the-input-field-value
I tried replacing the brackets, but it still escaped the HTML.

@Guenni007 Your method would be far superior. Sidenote I always appreciate your answers! You definitely add some amazing solutions on this forum, I applaud your effort!

• This reply was modified 7 years, 4 months ago by talawar.

You can open the imgur links in a new ta to view the imgs.

I replicated what you have done above.

The icon is there, but I believe it will never appear with the <input> tags. This is why I had to resort to editing the framework PHP file to change it to a <button>.

I feel like it is way more work to change the behavior of an HTML5 <tag> than to just use the correct <tag>.

• This reply was modified 7 years, 4 months ago by talawar. Reason: Imgs not working