Search code examples
htmlformscoldfusionfont-awesome

Using Font Awesome Unicode with Coldfusion

I have an HTML input button in my ColdFusion application that is submitting a form. I am trying to include a Font Awesome icon along with the text of the button. The only way I can specify the Unicode without throwing an error is to double out the hash character.

<input class="stylized_btn" tabindex="0" type="submit" name="save2" 
    id="save2" value=" &##xf0c7; Save This Ticket" 
    onclick="disableSaveButtonClick(event);" />

However, instead of showing the icon, it just shows a square. enter image description here

This seems like it's a quirk with ColdFusion not recognizing my Unicode character because of the double hashtag, but that's just a guess. I have other button elements on my page that are properly displaying the Font Awesome icons correctly, so I know it is not an issue with my font definition. I am unsure where exactly I am going wrong here. Can anyone help shed some light?

Updated code using button tag instead.

HTML button

<button id="saveOnlyButton" name="save" class="stylized_btn">
    <i class="fas fa-save"> </i> Update Ticket
</button>

enter image description here

JavaScript

window.onload=function(){
    var SaveButton = document.getElementById("saveOnlyButton");
    SaveButton.addEventListener("click", disableSaveButton);
    }

    //Save Button Logic
        function disableSaveButton() {
            console.log("Save button clicked");
            document.getElementById("submitType").value = "save";
            document.getElementById("saveOnlyButton").innerHTML = "Please Wait...";
            document.getElementById("saveOnlyButton").disabled = true;
            document.getElementById("autoSumForm").submit();
        }
Solution

  • Have you tried using a BUTTON tag? (We stopped using input:submit buttons.)

    We usually use <button type =“submit”><i class=“fa fa-lg fa-my-icon”></i > Label Text</button>, but you should be able to use the HTML entity.