WordPress. 如何为社交链接添加图标(当它们与文本设置时)

本教程将向您展示如何在WordPress中为社交链接添加图标(当它们默认设置为文本时).

WordPress. 如何为社交链接添加图标(当它们与文本设置时)

社交链接可以用文本或图标表示. 在一些模板中，链接显示为文本，WordPress中没有选择用图标替换文本 dashboard:

如果你没有一个应该做什么的路线图，这似乎是一个真正的问题. 这就是为什么我们很高兴为您提供本教程.

为了给你的WordPress的社交链接添加图标 website，请按照以下步骤进行:

添加fontaawesome图标:

1. 首先，你需要添加图标. 这可以在css规则的帮助下完成. 要添加规则，请登录到WordPress管理面板并导航到 Appearance -> Editor tab. Open style.css 文件并滚动到文件的末尾.

2. 您需要创建规则，为社交链接和 ::before css element. 规则是这样的:

   之前(title =“facebook”):{
     content: "" !important;
     字体类型:FontAwesome !important;
     font-size: 40px !important;
   }
   

   在属性的“”中 content: 你需要插入a FontAwesome icon. 要做到这一点，您需要找到并复制粘贴图标 FontAwesome 3.2.1 Cheatsheet inside the ” “. (请注意，你需要复制图标本身，而不是它的代码):

   

   在此规则中，您还可以定义图标的字体大小. 例如，我们将它设置为40px css property font-size: 40px !important;.

3. 现在需要为模板中使用的其他社交链接创建规则. 根据需要复制粘贴规则多次，并将社交链接标题更改为 (title =“facebook”) selector. 然后复制粘贴你需要的图标 FontAwesome 3.2.1 Cheatsheet to content: “” !important;. 您将得到如下规则:

   之前(title =“推特”):{
     content: "" !important;
     字体类型:FontAwesome !important;
   font-size: 40px !important;
   }
   
   之前(title =“instagram”):{
     content: "" !important;
     字体类型:FontAwesome !important;
   font-size: 0px !important;
   }
   
   之前(title =“谷歌”):{
     content: "" !important;
     字体类型:FontAwesome !important;
   font-size: 40px !important;
   }
   

4. 添加完规则后，单击 Update File 保存更改按钮:

   

删除社交链接文本

1. Open the file static-social-networks.php in Appearance -> Editor tab 你的WordPress管理面板.

2. 在Ctrl + F搜索的帮助下 function 找到以下行(更接近文件末尾):

   echo $ social_networks[我]美元;
   

   

3. 请删掉这一行.

4. Click on Update File 保存更改的按钮.

Refresh your website 查看代表社交链接的图标 website:

现在你知道如何在WordPress中为社交链接添加图标了(当它们默认设置为文本时).

请随时查看下面的详细视频教程:

WordPress. 如何为社交链接添加图标(当它们与文本设置时)