17370845950

新闻动态

如何在 Thinkific 网站页脚添加可点击的居中图标（含课程链接）

本文详解如何在 thinkific 自定义页脚中安全嵌入一个来自 flaticon 的图标，使其可点击跳转至指定课程页面，并实现居中排版——无需复杂编码基础，全程适配 thinkific 的 html/js 编辑器限制。

在 Thinkific 中自定义页脚时，直接粘贴外部标签（如你尝试的 Flaticon 链接）会导致解析错误（“Named entity expected. Got none”），因为该链接是网页地址，不是 CSS 或字体文件 URL；而内联

混用又易触发 Thinkific 编辑器的 HTML 校验失败（如 “Unexpected end tag (p). Ignored”），因其页脚编辑器仅接受纯 HTML 片段（无顶层 /）且不支持已废弃的标签。

✅ 正确做法：使用 内联 SVG 或本地图片 + 语义化 HTML + 轻量 JS，全部代码集成于 Thinkific 页脚 HTML 区域（Settings → Branding → Footer Code），无需额外 CSS 文件或外部依赖。

Flaticon 提供的图标可直接下载为 SVG 格式（点击图标页右上角 ✅ “Download SVG”）。SVG 优势在于：体积小、缩放不失真、可内联书写、完全免外部请求，完美规避路径和跨域问题。

将以下完整代码粘贴到 Thinkific 页脚代码框中（替换 YOUR_COURSE_URL 为你实际的 Thinkific 课程链接，例如 https://your-school.thinkific.com/courses/your-course-slug）：



  
    
    
    Take a Break!

? 如何获取 SVG 代码？在 Flaticon 页面下载 SVG 文件；用文本编辑器（如 VS Code / 记事本）打开 .svg 文件；复制 ... 整个标签（不含和注释行）；替换上方代码中 ... 部分即可。

不要使用标签：已废弃，Thinkific 编辑器会报错。改用 text-align: center 或 Flex 布局。
避免相对路径引用图片（如 ./desktop/philosophy.png）：Thinkific 不支持本地文件系统路径。若坚持用 PNG，请先上传图标至 Thinkific 媒体库（Media → Upload），再复制其公开 URL 替换 src。
JavaScript 链接非必需：onclick="window.location.href=..." 可用，但更语义化、支持右键新标签页、SEO 友好，且无需额外 JS 块（Thinkific 页脚对内联 JS 支持不稳定）。
确保链接协议完整：务必以 https:// 开头，否则可能跳转失败。
移动端适配：上述 Flex 布局自动响应，图标与文字在手机端仍垂直居中，无需额外媒体查询。

页脚底部将显示一个居中的可点击图标 + “Take a Break!” 文字，点击后在新标签页打开你的 Thinkific 课程页面。样式简洁、加载极快、完全兼容 Thinkific 平台限制。

如需调整颜色、大小或间距，只需修改内联 style 中对应属性（如 width="32"、fill="#2563eb"、font-size:16px）。零配置，即改即现。