联系表上的普通 “提交”按钮看起来很通用。添加一个 联系表 7 提交按钮内的字体精彩图标 gives it一个视觉提示,吸引注意力,让动作更清晰,想想“发送消息”旁边的纸面图标或者“提交”旁边的信封图标
The catch?Contact Form 7 没有内置选项,可以在按钮中添加图标,需要将图标的 Unicode 十六进制代码直接插入 CF7 表单标签中,并配对一个小的 CSS 片段,即可加载正确的字体。
本教程将您一步步走过整个过程,您将学习如何添加a CF7 提交按钮的字体棒极了图标、表单字段占位符内部添加图标,同时处理 Elementor 用户和非 Elementor 设置的 Font Awesome 字体系列设置。更新了 Font Awesome 5、6 和最新的 2026 Elementor 版本。
你需要什么
在开始之前,请确保您已准备好这些:
- 文字出版社 与 联系表 7 已安装并激活
- 字体太棒了 站(通过元素器、插件或手动 CDN)上加载
- 访问您的主题 自定义CSS 面板(外观 > 自定义 > 附加 CSS)
- Unicode 十六进制代码,用于您所需的图标(我们将向您展示在哪里可以找到此图标)
所需时间: 5-10分钟的时间
技能水平: 初(无需编码经验,复制粘贴即可)
第 1 步:在您的网站上启用"非常棒"字体
Font 在任何图标渲染之前, 您的站点需要加载 非常棒。您如何执行此操作取决于您的设置:
如果您使用 Elementor(最简单的方法)
Elementor 附带内置了 Font Awesome,您只需确保使用旧图标代码时启用 Font Awesome 4 向后兼容性即可。
- 去 元素器 > 设置 > 高级 wordpress 仪表板中的选项卡
- 找 “负载字体真棒 4 支持” 并将其设置为 “是”
- 单击 保存更改
2026年更新: Elementor现在在最近的版本中默认加载了字体很棒6。“加载字体很棒4支持”切换确保向后兼容旧的图标代码。如果你使用的是FA6图标代码(就像那些来自 字体 很棒 6 图标搜索的),你不需要改变任何东西,因为元素人会自动处理它。
如果您也在使用 Elementor 的主插件,你获得访问权限 8个高级图标库 除了字体之外,很棒,在 Elementor 编辑器内还为您提供了数千个附加图标。
如果您不使用 Elementor
安装官方 字体 很棒的插件 来自 WordPress.org。激活后:
- 去 设置 > 字体 太棒了
- 选择您的版本(字体 Awesome 5 Free 或 6 Free)
- 选择交付方法(CDN 代表 v5,或 Kit 代表 v6)
- Save,您就可以开始在整个网站上使用图标了
重要: Font Awesome 6 无法通过旧版 CDN 获得,如果您想要 FA6 图标,则需要在以下位置设置免费套件 fontawesome.com 或者使用 WordPress 插件的套件集成。
2步:找到图标的Unicode十六进制代码
每个 Font Awesome 图标都有一个唯一的 Unicode 十六进制代码,这是您将粘贴到联系表 7 提交按钮中的代码。
11选5走势图以下是如何找到:
- 去 字体 很棒的图标搜索页面
- 搜索您想要的图标(例如,“纸面”、“信封”、“箭头右”)
- 单击图标可打开其详细信息页面
- 寻找 统一码 value。像是4-5个字符的十六进制代码
f1d8(纸平面)或f0e0(信封)中
以下是一些流行的提交按钮图标及其 Unicode 代码:
| 图标名称 | Unicode 六角形 | 最好的 |
|---|---|---|
| 纸飞机 | f1d8 | 发送/提交消息 |
| 信封 | f0e0 | 电子邮件/联系表 |
| 箭头向右 | f061 | 下一个/继续操作 |
| 检查 | f00c | 确认/完成操作 |
| 评论 | f075 | 聊天/反馈表 |
第 3 步:将字体"很棒"图标添加到您的联系表 7 提交按钮
Now主事件。您将图标的Unicode十六进制代码直接插入到CF7表单标签中。以下是确切的过程:
打开您的联系表
去 联系方式 > 联系表格 wordpress仪表板中。单击要编辑的表单(或创建一个新的表单)。
查找提交按钮标签
Form编辑器中, 寻找提交按钮标签, 通常看起来是这样的:
[submit "Submit"]插入 Unicode 十六进制代码
将提交标签替换为放置在按钮文本旁边的图标代码。使用 HTML 实体格式 &#x +十六进制代码+ ;
例如,要在文本"“发送消息”后添加纸面图标:
[submit "Send Message "]或者将图标放在文本之前:
[submit " Send Message"]下提交按钮中的图标的完整联系表单示例:
<label>Your Name
[text* your-name]</label>
<label>Your Email
[email* your-email]</label>
<label>Subject
[text your-subject]</label>
<label>Your Message
[textarea your-message]</label>
[submit "Send Message "]
步骤 4:添加图标字体的 CSS
Icon 在告诉浏览器提交按钮使用哪种字体之前不会正确显示,如果没有这个 CSS,你会看到一个小方块或问号而不是图标。
去 外观 > 自定义 > 附加 CSS 并粘贴以下片段之一:
对于字体 Awesome 5(元素默认值)
.wpcf7 input[type="submit"] {
font-family: "Font Awesome 5 Free", sans-serif;
font-weight: 900;
}为字体真棒6
.wpcf7 input[type="submit"] {
font-family: "Font Awesome 6 Free", sans-serif;
font-weight: 900;
}的 font-weight: 900 solid图标(最常见的样式)所必需的,如果您使用的是常规图标,请将其更改为 font-weight: 400。对于品牌图标(如 Twitter 或 GitHub 徽标),请使用 font-family: "Font Awesome 6 Brands" 与 font-weight: 400.
| 图标风格 | 字体系列 (FA5) | 字体系列 (FA6) | 字体重量 |
|---|---|---|---|
| 固体 | “字体真棒 5 自由” | “字体真棒6自由” | 900 |
| 常规 | “字体真棒 5 自由” | “字体真棒6自由” | 400 |
| 品牌 | “字体真棒5品牌” | “字体真棒6品牌” | 400 |
专业提示: 如果图标显示在桌面上但不显示在移动设备上,请添加 -webkit-font-smoothing: antialiased; 並 text-rendering: auto; 到CSS规则。这修复了跨浏览器渲染不一致的问题。
CSS 保存,并预览表单,现在应该在文本旁边看到提交按钮内部渲染的图标。
奖励:将字体"很棒"图标添加到 CF7 占位符字段
Form 字段占位符里面也要图标吗?可以在邮件字段中添加信封图标,在名称字段中添加用户图标,在消息字段中添加铅笔图标,它采用相同的 Unicode 方法。
CF7代码, 占位符中带有图标:
[text* your-name placeholder " Your Name"]
[email* your-email placeholder " Your Email"]
[text your-subject placeholder " Subject"]
[textarea your-message placeholder " Your Message"]
[submit "Send Message "]现在添加 CSS 以将"字体棒极了"字体应用到占位符:
/* Icon font for submit button */
.wpcf7 input[type="submit"] {
font-family: "Font Awesome 5 Free", sans-serif;
font-weight: 900;
}
/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
font-family: "Font Awesome 5 Free", Arial, sans-serif;
font-weight: 900;
color: #999;
}
占位符字体的注释: 设置 font-family on placeholder 影响所有占位符文本, 而不仅仅是图标, 如果您的占位符文本的其余部分看起来与预期不同, 则添加主题的主体字体作为后备: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;
无代码方法:带有 Elementor 主插件的样式 CF7
CSS,如果你宁愿完全跳过, Elementor 的主插件 包括一个专门的 联系表 7 widget,可让您在视觉上自定义表单的外观,而无需编写一行代码。
以下是您可以用以下方法做的事情 MA 联系表 7 小部件:
- 样式提交按钮 具有自定义颜色、渐变、悬停效果、边框和填充
- 自定义输入字段 具有背景颜色、边框半径和排版
- 应用预构建样式预设 一键获得精美表格
- 控制间距和布局 对于 Elementor 面板中的每个表单元素
- 使用任何图标 从 8个高级图标库 与主插件捆绑在一起
如果您希望您的联系表单与网站的设计相匹配,而无需深入研究 CSS 选择器,那么这是最快的方法。只需拖动小部件,选择您的表单,并从可视化编辑器中设计所有内容即可。
排除常见问题的麻烦
该图标显示为方框或问号
这意味着"字体""太棒了"字体不会为提交按钮加载。仔细检查:
- 字体 Awesome 在您的网站上激活(Elementor 设置或 FA 插件)
- 您的 CSS 包括正确的
font-family並font-weight - 您使用正确的版本(FA5 与 FA6 字体系列名称不同)
图标出现,但常规文本看起来很奇怪
当你设定时 font-family 到 字体 整个按钮真棒,按钮中的所有文本都使用该字体 添加一个后备字体: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;
该图标可在桌面上使用,但不能在移动设备上使用
CSS 规则中添加这些属性:
.wpcf7 input[type="submit"] {
font-family: "Font Awesome 5 Free", sans-serif;
font-weight: 900;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: auto;
}我想在伪元素之前使用::
CF7提交按钮是一个 <input type="submit"> element。input 元素不支持 ::before 或 ::after pseudo-elements,因为他们不能有子节点,所以我们才直接在按钮文本中使用 Unicode 十六进制方法来代替,如果需要伪元素支持,则需要将提交按钮转换为 a <button> 使用 CF7 过滤钩的标签,这需要自定义 PHP。
常见问题
我可以在不带 Elementor 的情况下将 Font Awesome 图标添加到联系表 7 中吗?
是的。安装 官方字体 很棒的 WordPress 插件 elementor 就是要在你的站点上加载图标字体,然后按照上面描述的同样的 Unicode 十六进制代码方法,过程是相同的; Elementor 只是让它稍微容易一些,因为 FA 是预加载的。
这适用于 Font Awesome 6 吗?
是。Unicode十六进制代码方法适用于字体真棒5和6。唯一的区别是CSS font-family 价值:使用 "Font Awesome 6 Free" 代替 "Font Awesome 5 Free"。确保通过套件或 WordPress 插件将 FA6 加载到您的网站上。
我在哪里可以找到 Font Awesome 图标的 Unicode 十六进制代码?
去 fontawesome.com/搜索、找到你的图标,然后点击它。 Unicode 值(4-5 个字符的十六进制代码,例如 f1d8()显示在图标的详细信息页面上。使用格式  CF7提交标签中。
我可以在提交按钮上添加多个图标还是只添加一个?
Unicode 十六进制代码插入多于一个的提交标签, 就可以添加多个图标, 例如: [submit " Send Message "] would 在文本前面放一个信封图标,后面放一个纸平面图标。但要保持干净;一个图标通常就足够了。
包裹起来
添加a 字体 非常棒的图标到您的联系表 7 提交按钮 是小小的改变,它会产生明显的差异 Unicode十六进制代码方法跨字体真棒5和6工作,只需两个步骤(编辑表单标签 + 添加CSS),并且需要不到5分钟的时间来设置。
Placeholder 方法,同样适用逻辑:将十六进制代码粘贴在 placeholder 属性内,并在 CSS 中定义字体系列,这两种方法都给您的表单带来更加精致、专业的感觉。
如果您想完全跳过 CSS, 主插件 CF7 小部件 elementor内部视觉处理表单造型,无论哪种方式,你的表单看起来都会比默认的cf7输出更好。
相关阅读: Elementor 图标和字体库指南 | 如何在 Elementor 中创建动画按钮 | CF7 造型与主插件
