在 Coldfusion 中使用 Font Awesome Unicode

Question

我在提交表单的 ColdFusion 应用程序中有一个 HTML 输入按钮。我试图在按钮的文本中包含一个 Font Awesome 图标。我可以在不引发错误的情况下指定 Unicode 的唯一方法是加倍散列字符。

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

但是，它没有显示图标，而是显示了一个正方形。

这似乎是 ColdFusion 由于双标签而无法识别我的 Unicode 字符的怪癖，但这只是一个猜测。我的页面上还有其他按钮元素可以正确显示 Font Awesome 图标，所以我知道这不是我的字体定义的问题。我不确定我到底哪里出错了。谁能帮忙解释一下？

使用按钮标记更新了代码。

HTML 按钮

<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

不使用输入元素，而是使用按钮。按钮的默认行为是提交表单。

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

（我添加了 btn-default 以防您使用 bootstrap）

Answer 2

您尝试过使用 BUTTON 标签吗？（我们停止使用 input:submit 按钮。）

我们通常使用<button type =“submit”><i class=“fa fa-lg fa-my-icon”></i > Label Text</button>，但您应该可以使用HTML实体。

Answer 3

这不是您建议的 ColdFusion 中的怪癖。 ColdFusion 的行为完全符合预期。您需要双散列 ## 的原因是因为无论何时您在 <cfoutput> 标记中，ColdFusion 都会将单个散列 # 视为变量或可计算表达式的开始。当它找不到结束哈希时，它会抛出一个错误。

现在有时您的意图是将散列用于显示目的而不是评估变量或表达式，就像您的情况一样。所以解决方案是使用双散列 ## 和一个转义字符让 CF 知道你只想在渲染页面上将它显示为单个散列。

如果您使用浏览器的开发人员工具并检查元素，它应该会正确显示为单个哈希。解决您的问题的另一个方法是确保从 <cfoutput> 块中删除带有输入按钮的代码部分。

最重要的是，您不应该通过查看 CF 源代码进行调试，您应该通过使用浏览器的开发人员工具或浏览器的“查看源代码”选项查看呈现的页面来进行调试。如果可以，请通过提供提交按钮的“检查元素”的屏幕截图来更新您的原始问题。

在 Coldfusion 中使用 Font Awesome Unicode

Using Font Awesome Unicode with Coldfusion

html

forms

coldfusion

font-awesome