Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

场景：勾选项变成图标清单

做酒店、房源或产品页时，「设施」这类信息最适合用 ACF Checkbox 字段：编辑时勾选（泳池、健身房、免费 Wi-Fi……），前端展示成带图标的清单。Bricks 的 Checkbox 动态数据默认只能输出逗号分隔的文本，想要「每项一行 + 自定义图标」的列表样式，就需要一点 PHP 和 CSS 配合。

这个免费教程的做法：用 PHP 把勾选值循环输出成 <ul> 列表，再用 CSS 背景图（内嵌 SVG）替换浏览器默认的项目符号，实现任意自定义图标。整套方案零插件、零外链图片。

Step 1：Code 元素输出列表

先用 ACF 创建一个字段组，包含一个 Checkbox 类型的字段（比如 room_amenities），并在文章里勾选若干选项。

然后用 Bricks 编辑文章类型（或页面）的模板，添加一个 Code 元素，粘贴下面的 PHP：

<?php

$choices = get_field( 'room_amenities' );

if ( $choices ): ?>

  <ul>
      <?php foreach( $choices as $choice ): ?>
          <li><?php echo $choice; ?></li>
      <?php endforeach; ?>
  </ul>

<?php endif; ?>

把 room_amenities 替换成你自己的字段名，点击 Sign code（签署代码）按钮。这样前端就会渲染出一个列表：勾选的每个值一项。get_field 对 Checkbox 字段返回的是选中值的数组，foreach 逐个输出。

Step 2：CSS 换成 SVG 图标

选中这个 Code 元素，在 STYLE → CSS 里粘贴：

%root% ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

%root% li {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%235f6368'%3E%3Cpath d='M0 0h24v24H0V0zm0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 2px;
	padding-left: 30px;
	margin-bottom: 20px;
}

%root% li:last-child {
	margin-bottom: 0;
}

%root% 是 Bricks 的根元素占位符，自动替换为该元素的唯一类名，避免样式泄漏到页面其他列表。效果：去掉默认圆点（list-style-type: none），每行左侧用 SVG 图标做背景图，图标是带圆圈的白色对勾，颜色由 fill='%235f6368'（即 #5f6368）控制。

想换图标：用文本编辑器打开任意 SVG 图标文件，复制其 HTML，粘贴到「Insert SVG here」这类转换工具里生成对应的 data URI，再替换 CSS 中的 background-image 整段即可。

原理说明

• Checkbox 字段的返回值是选中项字符串数组，这是 PHP foreach 能直接循环的前提。
• 图标不引外链图片，而是把 SVG 转成 URL 编码的 data URI 塞进 background-image，一次请求、无额外加载、可随 CSS 控制颜色和大小。
• padding-left: 30px 给图标让出空间，background-position: left 2px 微调垂直位置。
• %root% 作用域隔离是 Bricks 最佳实践：只用元素自身的类名做前缀，不影响全局 <ul> 样式。

小结

这个方案把「数据展示」和「视觉样式」彻底分开：PHP 只负责把勾选项渲染成语义化列表，CSS 负责把项目符号换成任意 SVG 图标。想改图标、改颜色、改间距，全在 CSS 里操作，不需要动结构代码。

小结：ACF Checkbox → 自定义图标清单 = Code 元素输出 <ul> + %root% 作用域 CSS 换 SVG 背景图。免费、零外链，换图标只需替换 data URI。