Django Crispy StrictButton中Unicode图标显示为方框如何解决

渲染异常由以下几个原因共同导致：

• 未引入Bootstrap Icons字体资源：字体文件未加载时，所有图标专属编码都会显示为带编码的小方框
• Unicode编码错误：使用的\uF282是双向下雪佛龙的编码，单向下雪佛龙chevron-down对应的正确Unicode为\uF229
• StrictButton默认开启HTML转义：直接传入HTML字符串会被转义为普通文本，不会被浏览器解析为DOM元素
• 参数使用错误：Django Crispy Forms中指定元素id的参数为css_id，直接传id参数不会给最终渲染的按钮加上对应id属性
• 冗余代码无实际作用：自定义的__unicode__方法在Python 3环境下完全多余，Python 3字符串默认就是Unicode编码，该写法对渲染结果没有任何帮助

按照以下步骤操作即可正常渲染图标：

1. 引入Bootstrap Icons资源 #

首先在基础模板中引入Bootstrap Icons的样式文件（本地静态资源或公共CDN均可），确保字体资源能正常加载。

2. 选择对应写法实现按钮 #

推荐使用官方标准的标签写法，兼容性更好：

# 先导入依赖
from django.utils.safestring import mark_safe
from crispy_forms.bootstrap import StrictButton

# 定义按钮
StrictButton(
    mark_safe('<i class="bi bi-chevron-down"></i>'),
    css_class="btn btn-outline-secondary btn-sm",
    css_id="button-id-right"
)

这里用Django内置的mark_safe方法把HTML字符串标记为安全内容，StrictButton就不会对其做转义处理，浏览器会正常解析渲染图标标签。

如果你更倾向于直接传Unicode字符，可以用以下写法，注意必须给按钮加上bi类，指定元素内文本用Bootstrap Icons字体渲染：

StrictButton(
    '\uF229',
    css_class="btn btn-outline-secondary btn-sm bi",
    css_id="button-id-right"
)

注意：使用Unicode写法时必须确保页面meta标签指定了UTF-8编码，否则仍可能出现乱码。

内容的提问来源于stack exchange，提问作者Mike