图标

的 图标字段 elementor 的完整图标库选择器放在小部件的面板中: 字体 棒极了,任何在网站上注册的自定义图标库,以及直接 SVG 上传,所有这些都在图标选择器编辑器已经知道的主插件内 小部件生成器、它是特征子弹、信息框、社交行以及每个其他带有小符号的点的字段。

与每个 Widget Builder 字段一样,Icons 控件也支持 条件(fromenable icon”) 切换打开时,仅当 “启用图标”切换打开时,其输出才会通过 呈现选择器,这非常有用 Twig-语法模板引擎.两份指南都涵盖了细节和局限性。

该值是一个有两个键的数组, value 並 library。那个形状有一个值得前面说明的结果:直接用打印字段 {{ my_icon }} oputs 一点也不出来,字体图标和上传的 SVG 也通过不同的标记进行渲染,所以模板需要一个短分支,两个图案都在下面,可以粘贴。

Icons 字段的作用 #

• 打开 Elementor 的图标库选择器 使用 Font Awesome、自定义库和 SVG 上传。
• 将镐存储为数组 的 value 並 library.
• 保留字体图标的类字符串: value 是图标的类,准备好了 <i> 标签。
• 保存 SVG 的嵌套文件数组: value 成为 URL 和 ID 对 {{ my_icon.value.url }}.
• 接受默认值和推荐列表(so picker) 可以将适合小部件的图标浮出水面。

如果您是构建小部件的新手,请从以下内容开始 小部件生成器概述 首先。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个功能列表小部件,其中每个实例显示一个图标,命名为 feature_icon旁边是一个简短的文本简介。

如何添加图标字段 #

找到 图标 widget 生成器编辑器左侧面板中的字段,与其他媒体字段分组。

将其拖入下面的一个部分 内容 tab。一旦它落地,该字段的选项会在左侧打开。

图标字段选项已解释 #

• 标签: elementor 中选择器上方显示的文本,例如 “特征图标”。
• 名称: 例如,字段、字母、数字和下划线的唯一标识符 feature_icon.
• 默认: 起始图标作为 a value 並 library pair,因此小部件永远不会无图标地掉入。
• 推荐: 挑选器首先浮出一组图标,引导编辑器选择适合设计的选择。
• 描述、显示标签、分离器: 标准显示设置,以及仅在另一个控件具有一定值时显示字段的条件。

将图标字段连接到模板 #

首先,几乎每个人都犯过一次错误: {{ feature_icon }} 打印什么都没有。 数组值上的直接打印快捷方式仅输出顶级 url key,而 Icons 数组没有,所以 token 出来是空的,没有错误,没有警告,只是图标应该所在的空白点,属性就是内容所在的地方。

字体图标 (字体真棒和其他基于类的库): value 持有类字符串,因此 a <i> tag渲染它:

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

上传的 SVG: SVG库中挑选出来的时候, value is 本身是一个带有 URL 和 ID 的数组, 因此图标渲染为图像:

<img src="{{ feature_icon.value.url }}" alt="">

小部件很少提前知道编辑器会选择哪种类型,因此可靠的模式会在上面分支 library 钥匙和手柄均:

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

与任何媒体类型字段一样,将整个内容包裹在空状态保护中,因此未设置的图标不会留下任何杂散 <i class=""> 后面:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

仅使用字体图标进行测试。 <i>-tag版本工作了一周,那么一个客户端上传一个品牌svg,图标就消失了,因为类属性不能保存文件数组,如果发货字段,发货分支。

使用 Elementor 中的 Icons 控件 #

Elementor 中将自定义小部件添加到页面,如果页面已经打开,则重新加载编辑器。该字段在您的标签下渲染为 Elementor 的图标选择器,显示当前图标。

单击它,图标库打开。搜索字体 Awesome,浏览任何自定义库,或切换到上传选项卡以获取 SVG。确认选择和预览更新,通过模板中与库匹配的分支运行。

常见用例 #

• 功能和福利列表 每点有一个符号。
• 信息和图标框 图标锚定卡的主题的位置。
• 社交链接行(URL)字段的图标,每个实例都配对一个图标。
• 按钮和号召性用语 带有小引导图标。
• 步骤和处理小部件 其中编号的阶段每个阶段都有一个匹配的符号。

Icons 字段工作的提示 #

• 切勿裸印字段。 {{ feature_icon }} 输出什么都没有;图标住在 {{ feature_icon.value }} 而且,对于 SVG, {{ feature_icon.value.url }}.
• 运送图书馆分馆。 的 {% if feature_icon.library == 'svg' %} pattern 是唯一保留了编辑器可以制作的每个选择版本。
• 守空状态。 {% if feature_icon.value %} 防止未设置的图标呈现空标签。
• 添加 aria-hidden="true" 到装饰性字体图标。 屏幕阅读器跳过符号并阅读旁边的文本。
• 用推荐来指导选择。 显示策划的集合可以使小部件的图标在网站中保持视觉一致。
• CSS 选项卡中的 SVG 大小。 上传的 SVG 以图像形式到达,因此为 img 分支提供宽度,以保持两个分支以相同的比例渲染。

常见问题 #

包裹起来 #

Widget 生成器图标字段将整个 Elementor 图标库带入自定义小部件, 价格为一个短分支: value 作为字体图标的类, value.url 作为 SVG 的文件,以及两者周围的防护。将其与 媒体领域 当插槽需要完整图像而不是符号时。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。