图标

Icons 字段将 Elementor 的图标选择器添加到使用主插件构建的自定义小部件中 小部件生成器。编辑器从图标库中选择一个图标或上传自己的SVG,你的模板打印出来。将其用于功能列表、信息框、按钮、社交链接以及其他任何小符号的帮助。

Icons是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.

Icons 字段的作用 #

• Elementor中为小部件的面板添加了一个图标框,带有图标库和上传SVG的按钮。
• 图标库包括 Font Awesome 和主插件附带的额外图标集,例如 Elementor 图标、Simple Line 图标、Linear 图标和 Material 图标。
• 该字段存储两件事: value (图标的CSS类, 或上传的SVG文件)和 library (它来自哪个集合)。
• 您的模板打印 <i> 图书馆图标和标签 <img> 上传 SVG 的标签。

如果您还没有构建小部件,请阅读 小部件生成器概述 首先。

在开始之前 #

• WordPress 已安装并处于活动状态。
• Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
• Widget 生成器中打开的一个小部件,本指南中的示例是一个 “特征列表” 小部件:一个名为的图标字段 feature_icon 以及标题的文本字段。

如何添加图标字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 上 内容 tab,添加一个部分,例如“特征”。
3. 类型 icons 在左侧的字段搜索框中。
4. 拖动 图标 into the section。its settings open in the left sidebar。

图标字段选项已解释 #

• 标签 是 Elementor 中图标框上方的文本,例如 “Feature Icon”。
• 名字 是该字段的唯一ID及其令牌的开头,所以 feature_icon 给出 {{ feature_icon.value }}。字母,数字和下划线仅。
• 描述 elementor 中出现在控制之下。
• 皮肤 offers Inline和媒体。它改变了构建者自己的预览绘制字段的方式。在我们的测试中,Elementor以任何一种方式显示了大图标框。
• 默认值 该图标是小部件的新副本。单击 更改图标 要选择一个,或小十字以清除它。在没有默认设置的情况下,字段以 Elementor 徽标图标开头。

Change Icon打开主插件图标选择器,在左侧选择一组,按名称搜索,单击一个图标,然后 插入.

在模板中打印图标 #

{{ feature_icon }} on its own 打印什么都没有, 因为字段中包含两个值。使用它的部分来代替:

• {{ feature_icon.value }} 是库图标的图标类,例如 eicon eicon-check。对于上传的 SVG,它会打印文件的 URL。
• {{ feature_icon.library }} 是设置名称,例如 eicons, simple-line-icons 或 svg 为上传。
• {{ feature_icon.value.url }} 是库时SVG的URL svg.

Editors 可以选择任一类型, 因此检查库并打印正确的标签。将所有内容都用检查空值来包裹, 因此当图标被删除时, 什么都不会打印:

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

图书馆图标是字体字形,因此它们采用 color 並 font-size 他们周围的元素。 a 中上传的 SVG <img> tag保留自己的颜色,所以大小与 width 並 height CSS 选项卡中。

单击 保存设置 当你完成后。

使用 Elementor 中的 Icons 控件 #

Widget 添加到页面,或者如果页面已经打开,则重新加载编辑器,图标框显示当前图标。悬停在上面查看 图标库 並 上传 SVG的, 以及一个垃圾桶图标来删除该图标。

图标库 elementor的图标窗口打开,在左侧选择一组,按名称过滤,点击一个图标点击 插入. 上传 SVG 打开媒体库,您可以上传或选择 SVG 文件。Elementor 可能会要求您允许 SVG 首次上传。

字体 很棒的图标和内联字体图标 #

Elementor图标,简单线条图标和上传的SVG在我们的测试网站上都显示在已发布的页面上,但字体真棒图标没有。Elementor的 内联字体图标 默认情况下功能已打开,它会阻止加载 Font Awesome 样式表,因此 <i> 来自小部件的标签保持空白。转到 元素器 > 设置 > 功能将内联字体图标设置为 不活跃 并保存。然后出现了 Font Awesome 图标。如果您想保留该功能,请使用其他图标集或 SVG 上传。

常见用例 #

• 功能列表和信息框,每个标题旁边都有一个图标。
• 带有前导或后导图标的按钮。
• 社交链接、联系方式和列表项目符号。
• 品牌标记,通过将徽标上传为 SVG。

Icons 字段工作的提示 #

• 始终在模板中处理这两种情况: <i> 为库图标和 <img> 对于 SVG 上传。
• 守卫与 {% if feature_icon.value %} 所以空图标不会留下空包装纸。
• 设置适合小部件的默认值,因此它永远不会意外显示 Elementor 徽标。
• 为包装纸而不是图标标签进行样式,因此两种图标类型位于同一框中。
• 在依赖它之前,请在实时页面上查看字体"很棒"的选项(请参阅上面的部分)。
• 对于图像而不是图标,请使用 媒体领域.

常见问题 #

包裹起来 #

Icons 字段添加,设置默认图标,并用同时处理库图标和 SVG 上传的模板打印,在已发布的页面上检查字体 Awesome 选取,如果空白,则关闭 Inline 字体 Icons 其他内容选项卡字段,请参见 网址 並 选择 字段,然后检查 定价 对于每个计划包含的内容。