wordpress字体_如何在WordPress帖子编辑器中使用图标字体(无需HTML)

wordpress字体

Icon fonts are vector icons used as fonts. They are popular among web designers because they look prettier than bitmap images. They can be resized without losing quality and styled using CSS. This is why many WordPress themes use icon fonts. Most notably, the default Twenty Thirteen and Twenty Fourteen themes. However for beginners, it is a little complicated to use icon fonts on their WordPress sites. In this article, we will show you how to use icon fonts in WordPress post editor without writing any HTML or CSS.

图标字体是用作字体的矢量图标。 它们在Web设计师中很受欢迎,因为它们看起来比位图图像更漂亮。 使用CSS可以调整它们的大小而不会降低质量和样式。 这就是为什么许多WordPress主题都使用图标字体的原因。 最值得注意的是,默认的二十三个和二十四个主题。 但是,对于初学者来说,在其WordPress网站上使用图标字体有点复杂。 在本文中,我们将向您展示如何在WordPress帖子编辑器中使用图标字体而无需编写任何HTML或CSS。

Genericons a GPL Licensed open source icon font set
影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明,请继续阅读。

First thing you need to do is install and activate the WP Visual Icon Fonts plugin. Upon activation, you need to go to Settings » Icon Fonts to choose an icon font set. Currently, the plugin comes with Font Awesome and Genericon fonts.

您需要做的第一件事是安装并激活WP Visual Icon Fonts插件。 激活后,您需要转到“设置”»“图标字体”以选择图标字体集。 当前,该插件附带Font AwesomeGenericon字体。

Choose an Icon Font to use with your WordPress theme

After choosing a font, you can now use it with in your WordPress posts, pages, custom post types, and even in your theme’s template files. To use icon fonts you need to create or edit a post, and you will notice an Icons button next to the Add Media button. Clicking on the icons button will open a drop down menu of all the icons available in the icon font set. Selecting an icon from this drop down menu will insert the icon in the post editor.

选择字体后,您现在可以在WordPress帖子,页面, 自定义帖子类型甚至主题模板文件中使用它。 要使用图标字体,您需要创建或编辑帖子,并且您会注意到“ 添加媒体”按钮旁边的“ 图标”按钮。 单击图标按钮将打开一个下拉菜单,其中包含图标字体集中所有可用的图标。 从此下拉菜单中选择一个图标将在帖子编辑器中插入该图标。

Adding icon fonts in WordPress posts and pages

You can also change the font size and color using the buttons in the visual editor.

您还可以使用可视编辑器中的按钮更改字体大小和颜色。

To use an icon in your theme, the easiest way to generate the required HTML is to add an icon font in post editor and then switch to Text editor to copy the HTML code. Paste it in your template files where you want to display an icon font.

要在主题中使用图标,生成所需HTML的最简单方法是在帖子编辑器中添加图标字体,然后切换到“ 文本”编辑器以复制HTML代码。 将其粘贴到要显示图标字体的模板文件中。

Copy icon fonts HTML to use in your theme files

Icon fonts can be used to create beautiful landing pages in WordPress without using images. They can also be used to highlight different sections of a long form article or post. This plugin brings you 369 icons with Font Awesome and 62 icons with Genericon font.

图标字体可用于在WordPress中创建漂亮的登录页面,而无需使用图像。 它们还可以用于突出显示长篇文章或文章的不同部分。 此插件为您带来369个带有Awesome字体的图标和62个具有Genericon字体的图标。

We hope this article helped you add awesome icon fonts in WordPress. Let us know how you intend to use icon fonts in your WordPress projects by leaving a comment below.

我们希望本文能帮助您在WordPress中添加很棒的图标字体。 通过在下面留下评论,让我们知道您打算如何在WordPress项目中使用图标字体。

翻译自: https://www.wpbeginner.com/plugins/how-to-use-icon-fonts-in-wordpress-post-editor/

wordpress字体

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值