如何为 WordPress 图标添加字体或图像

WordPress 不仅仅是一个可以输入文本的系统。 您还可以合并许多有趣和有趣的内容,为您的网站提供个人风格。 例如,在网站中使用 WordPress 图标可可视化链接,从而获得更具吸引力的外观。

图标在 WordPress 中以多种方式使用。 如果你往左看 管理面板以显示突出显示每个工具的图标。

最小化屏幕宽度后,图形将显示每个工具的控制。 这可能还取决于你拥有的不同方法 管理面板本身已自定义.

本教程演示如何使用这些类型的图像。

为什么要使用WordPress图标?

以这种方式使用的互联网中使用的大多数图标都是矢量图形。 它们在大小上是轻量级的,实际上对网站的功能没有太大影响。 但是,它们为游客增加了一点耀斑和清晰度。

人类是一种视觉物种。 对许多人来说,将图像与功能相关联要容易得多。 无论苹果缺少咬痕,还是信封背面的小图形,都可以看到此示例。

参观者往往比文字更了解图像,特别是因为许多这些小图形是非常不言自明的。 这为网站提供了视觉吸引力,同时使某些功能更容易为用户。

在 WordPress 网站上安装图标

在 WordPress 中安装图标的方法有很多种。 今天, 更好的字体真棒 。.plugin。 此插件易于使用,向后兼容,并附带各种功能来发布图标。

要使用更好的字体真棒:

第 1 步:转到左侧的 WordPress 仪表板插件区域。

第 2 步:在左上角[新規追加]单击该按钮,然后单击[より良いフォント素晴らしい]搜索。

步骤3:安装并激活此插件。

更好的字体真棒

第 4 步:这会将功能添加到具有相同名称的 WordPress 设置中。 单击“更好的字体真棒”控件,从您的设置 管理面板.

更好的字体设置

步骤5:在设置区域中,您可以控制要使用的插件版本。 现在,让我们保持“最新”。

始终保持最新设置

第 6 步:您可以调整网站收缩 CSS 的方式、隐藏管理员通知或从原始“字体 WP”中删除旧的短代码和调整。

调整以模拟 CSS

第 7 步:您还会注意到插件提供了如何增加图标和旋转图标的示例。 如果您计划手动使用或稍后调整大小,则此功能非常有用。

使图标变大

步骤8:单击左下角的按钮以保存设置。

保存设置按钮

步骤9:这个插件添加的另一个功能是WordPress编辑器[アイコンの挿入]按钮。 它适用于帖子和页面。 现在,让我们打开或创建新帖子。

[アイコンの挿入]按钮

步骤10:单击WordPress编辑器文本字段中的任意位置以放置图标。

步骤11:位于编辑器正上方[アイコンの挿入]单击该按钮。 这将打开所有可以插入的不同图像的下拉列表。 你可以看到,有很多选择。

插入图标列表

手记:您还可以使用此窗口中的搜索栏按名称搜索特定图标。

步骤12:单击要使用的内容。 系统会自动为图像添加短代码。 从这里,您可以插入调整以调整图形的大小和大小。

插入图像短代码

手记:此插件适用于 WordPress 可视化编辑器和文本编辑器。

步骤13:完成后,您可以像往常一样继续编辑帖子或页面。

插件不仅可以安装短代码,还可以使用自己的 CSS 类进一步自定义效果和样式。 如果要使网站上的图标保持特定大小,而无需每次都手动调整图标,则此功能非常有用。

将自定义 CSS 添加到 WordPress 图标

要以这种方式自定义图标,请单击 将 CSS 添加到网站这不是一个困难的调整,但更多地了解你可以做什么可能是非常有益的。

因此,假设您在网站上使用 Android 图标,并希望使其变为浅绿色。 要做到这一点:

第 1 步:单击图标按钮将 Android 图形添加到帖子或页面。

添加安卓图形

第 2 步:查找名为“类”的短代码区域

查找类和可见区域

第 3 步:在引号之间插入文本,安卓图标。

在报价之间添加一个图标,添加一个安卓

第 4 步:图标名称 = “安卓”类 = “安卓图标” unprefixed_class=“”

查看最终代码

第 5 步:保存帖子或页面。 如果您尚未发布,最好将其另存为草稿。

保存草稿

步骤6:转到主题的样式表文件。 您可能需要使用 股票代码 访问应用程序或 cPanel 文件管理器。

步骤 7:将以下代码添加到 CSS 文件:

.fa-androidicon {

字体大小: 75px;

颜色:#45F338;*

将代码添加到 CSS 文件

手记:在某些主题中,[外観]您可以使用 中的自定义选项将 CSS 代码直接添加到主题中。

步骤8:左下角[ファイルの更新]单击。

[ファイルを更新]单击。

请注意,更新时将删除对主主题样式.css的调整。 此函数始终最好用于通过子主题或自定义程序保存自定义 CSS 调整的主题。

现在,这些设置将永久应用于网站中使用的 androidicon 的所有实例。

开头的“.fa-”告诉 WordPress 命名为“androidicon”的类使用括号中的代码。 如果您对 CSS 知之甚少,此时可以执行各种操作来进一步自定义图形。

字体大小确定图标的大小(以像素为单位)。 您可能需要稍微摆弄此数字,以找到要执行的最佳维度。

“颜色”是表示绿色色调的十六进制代码。 这只是一个示例,您可以将此代码更改为任何颜色。

需要注意的其他图标插件

WP 字体真棒

WP 字体真棒

酒店 WP 字体真棒 类似于上面的插件。 您可以使用短代码来控制图形。 顺便说一下,它们也适用于小部件,例如在“搜索”之前使用放大镜。

菜单图标

菜单图标

菜单图标 向菜单项添加更多感觉。 例如,您可以轻松地插入导航菜单区域的图标,类似于 WordPress 仪表板中显示的图标。

社交媒体和共享图标

社交媒体和共享图标

WordPress 安装中最受欢迎的附加功能之一是社交媒体安装。 酒店 社交媒体和共享图标 该插件提供了一系列社交图标,可在各种引人入胜的布局中添加。

您可以使用 WordPress 图标突出显示访问者感兴趣的链接或向特定功能添加耀斑。 它们可以非常引人注目,并且可以做惊人的事情来吸引观众。 强调您的网站,并给客人的东西,你会欣赏比伟大的内容。

网站中有哪些附加内容,以提供更直观的吸引力? 您使用什么图标来吸引对功能的关注?

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

如何创建自定义 WordPress 页面模板

2022-11-2 19:31:48

WordPress 教程

如何在 WordPress 中使用联盟链接斗篷

2022-11-2 21:33:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索