精致的图标信息引导区块 - wordpress 区块

看过之前分享的“精彩的引导卡片”的站长应该知道，那款卡片的精致和舒适，这一次分享的是同一位作者制作的图标信息引导卡片，很适合用在一些需要复杂的可视化展现信息的地方，例如主题介绍、产品特色等地方。这一次和大家分享这款卡片及其用法。

• 代码来源：Muiteer

原版：

效果展示：

需要注意的是，仅演示中有 6 列、3 列显示异常，于网站中正常。

如何使用？

点击下方的 Demo 按钮，即可查看效果图，右击鼠标查看源代码，根据代码注释复制代码到自己需要的地方，一般是页面中，因为这款引导卡片很占宽度，推荐放到页面，当然，因为是自适应设计，理论上放到哪里都可以。，记得看代码注释哦(。・∀・)ノ

个性化

我想换背景色和文本颜色：

参考以下代码：

1
.theme-feature-container {
2
    background-color: burlywood;/*背景色*/
3
    color: rebeccapurple;/*文本色*/
4
}

需要注意的是，因为图标都是 SVG 格式，他们会和文本一起改变颜色/

我想换上自己喜欢的图标

细心的你一定观察到了图标排布的规律，核心是这一段：

1
    <li>
2
      <div class="item-box">
3
        <span class="icon">
4
          SVG图标
5
        </span>
6
        <h3>Icp备案</h3>
7
      </div>
8
    </li>

打开阿里巴巴矢量图标库，找到喜欢的图标，点击”下载图标”，选择自己需要的大小（30），点击“复制 SVG”。

然后将代码粘贴到上面代码展示的”SVG 图标”处即可。

如果还有疑问的话，欢迎到评论区留言交流。

文中提到的精彩引导卡片在这篇 WordPress 美化教程中：

这位作者开发的 WordPress 主题请看这里：