使用字体 Awesome Unicode 和 Coldfusion

Question

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.

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> 

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();
        }   

Answer 1

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.

Answer 2

Instead of using an input element, use a button. The default behavior of a button is to submit a form.

<button class="stylized_btn btn-default" tabindex="0" id="save2" onclick="disableSaveButtonClick(event);"><i class="fa fa-save"></i> Save This Ticket</button>

(I added btn-default in case you're using bootstrap)

Answer 3

It's not a quirk in ColdFusion as you suggest. ColdFusion is behaving exactly as intended. The reason why you need a double hash ## is because whenever you are in a <cfoutput> tag, ColdFusion sees the single hash # as the start of a variable or evaluable expression. When it doesn't find the closing hash, it throws an error.

Now there are times when your intent is to use the hash for display purposes and not to evaluate a variable or expression, as it is in your case. So the solution is to use the double hash ## an an escape character to let CF know you want to just display it as a single hash on the rendered page.

If you use your browser's developer tools and inspect element, it shold appear to correctly display as a single hash. The other fix to your issue is to make sure you remove the section of code with the input button from being inside a <cfoutput> block.

Most importantly, you shouldn't be debugging by looking at the CF source code, you should debug this looking at the rendered page by using your browser's developer tools or the browser's "view source" option. If you can, please update your original question by providing a screenshot of the "inspect element" of your submit button.