如何在Scriptcase空白应用中不依赖CDN使用内置图标？

1. 修正CSS引入路径 #

手动编写的相对路径../_lib/css/font-awesome.min.css易因应用层级结构出错，改用Scriptcase内置常量SC_PATH_LIB获取绝对路径，避免路径偏差：

echo '<link rel="stylesheet" type="text/css" href="' . SC_PATH_LIB . 'css/font-awesome.min.css">';

2. 确保字体文件可访问 #

Font Awesome图标渲染依赖对应字体文件（如.woff2、.woff），若CSS中字体相对路径失效，可手动覆盖字体路径：

echo '<style>
@font-face {
    font-family: "FontAwesome";
    src: url("' . SC_PATH_LIB . 'fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
         url("' . SC_PATH_LIB . 'fonts/fontawesome-webfont.woff?v=4.7.0") format("woff");
}
</style>';

3. 使用Scriptcase内置图标函数 #

直接调用Scriptcase内置的sc_icon()函数，自动处理图标渲染及资源依赖，无需手动写标签：

echo sc_icon('fa-home') . ' Home';

4. 调整HTML头部设置 #

进入空白应用的设置→HTML头部，在自定义HTML头部中添加CSS引入代码，确保CSS在页面加载初期就被加载：

<link rel="stylesheet" type="text/css" href="{SC_PATH_LIB}css/font-awesome.min.css">

其中{SC_PATH_LIB}为Scriptcase占位符，会自动替换为正确的资源路径。

5. 排查资源加载状态 #

按F12打开浏览器开发者工具，切换到网络标签，刷新页面后检查font-awesome.min.css及对应字体文件是否返回200状态码。若显示404，说明路径仍需根据实际部署结构调整。

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