WordPress社交网络菜单图标更改——SVG图标

向右看齐 2022-06-09 01:43 446阅读 0赞

# 前言 #

我使用的主题为TwnetySeventeen，在编辑页面底部社交网络菜单时发现只有一些国外网站才会显示图标，例如Facebook等，国内微博等网站无法显示logo。

![Flgz9Nu.png][]

![LwOJM07.png][]

但是我并没有找到这些图标文件，通过浏览器检查元素我发现这些这些图标使用的是SVG图标，于是我决定动手自己添加图标。不清楚SVG格式的请点击[使用SVG中的Symbol元素制作Icon][SVG_Symbol_Icon]

# 修改主题SVG文件 #

WordPress使用的是SVG Sprite技术，将图标图形整合在一起，实际呈现的时候准确显示特定图标。TwnetySeventeen使用的SVG文件的位置为

> wp-content\\themes\\twentyseventeen\\assets\\images\\svg-icons.svg

使用编辑器或记事本打开，里面包含了网站使用的所有SVG图标。  
![PzbYU5b.png][]

我们将自己制作或者网上下载的SVG文件修改一下格式然后添加进这个文件中。修改方法就按照里面已经有的格式修改就行。加上symbol标签，id前面加上icon-，适当调整viewBox。viewBox值有4个数字：

viewBox="x, y, width, height"  // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

这个宽度和高度代表对图标的截取，如果没有调整到合适的比例可能只截取了部分图标，例如我对微博图标的调整如下：

<symbol id="icon-weibo" viewBox="0 0 180 150">

我提供这个微博SVG文件的下载，请点击[下载][Link 1] 。没分的可以联系我邮箱。

# 修改icon-functions.php文件 #

可通过网站后台——外观——编辑找到该文件，找到函数

function twentyseventeen_social_links_icons()

在该函数中按照样式添加需要链接的网站  
![yIYnDT0.png][]

# 添加菜单 #

在网络社交菜单中选择添加自定义链接，链接文本为你上一步设置的文本，例如我设置的为weibo，点击保存即可。效果如下。  
![ZRvyxA6.png][]

[Flgz9Nu.png]: http://i.imgur.com/Flgz9Nu.png
[LwOJM07.png]: http://i.imgur.com/LwOJM07.png
[SVG_Symbol_Icon]: https://isux.tencent.com/16292.html
[PzbYU5b.png]: http://i.imgur.com/PzbYU5b.png
[Link 1]: http://download.csdn.net/download/timekeeperl/9948327
[yIYnDT0.png]: http://i.imgur.com/yIYnDT0.png
[ZRvyxA6.png]: http://i.imgur.com/ZRvyxA6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读

相关 anychart更改图标颜色

"data": \[ \{"x": "Apples", "value": "128.14", fill: "green"\}, \{"x"...

傷城~/ 2024年04月19日 08:47/ 0 赞/ 63 阅读

相关 svg修改图标颜色

对于svg图标，想通过hover或者active 添加颜色，没有办法修改，解决办法： 1. 修改[svg图片][svg]源最开始的svg图标： ![2275efcd3b

水深无声/ 2024年03月17日 17:38/ 0 赞/ 87 阅读

相关 VUE之使用svg图标

目录一安装依赖二：配置webpack 2.1 首先创建一个svg文件用来保存图标 2.2 配置build文件夹中的webpac

今天药忘吃喽~/ 2023年07月20日 13:49/ 0 赞/ 8 阅读

相关 svg矢量图标

一、介绍：是使用 XML来描述二维图形和绘图程序的语言，可缩放矢量图形。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE

待我称王封你为后i/ 2022年10月29日 01:43/ 0 赞/ 281 阅读

相关圆形图标菜单

背景：实现圆形图标菜单，中间一个大圆圈，周围是小圆圈先上效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

￡神魔★判官ぃ/ 2022年10月18日 00:52/ 0 赞/ 143 阅读

相关免费社交类图标集

[![ee337bd1-47b8-4bb1-bb6f-9f0c61925d9a.jpg][]][ee337bd1-47b8-4bb1-bb6f-9f0c61925d9a.jpg

小灰灰/ 2022年08月12日 01:00/ 0 赞/ 181 阅读

相关 VC 更改标题图标

1）：在ResourceView(资源编辑器)中打开Icon文件夹，把IDR\_MAINFRMAE图标改成你希望的样式即可。将资源中的ID号为IDR\_MAINFRAME

妖狐艹你老母/ 2022年07月19日 01:23/ 0 赞/ 226 阅读

相关 WordPress社交网络菜单图标更改——SVG图标

前言我使用的主题为TwnetySeventeen，在编辑页面底部社交网络菜单时发现只有一些国外网站才会显示图标，例如Facebook等，国内微博等网站无法显示logo。

向右看齐/ 2022年06月09日 01:43/ 0 赞/ 447 阅读

相关把 svg 图标转成字体图标调用

1、打开 http://www.iconfont.cn 网站，登录账号 2、点击上传图标，上传完去到我的图标就可以查看到刚上传的图标了 ![2018031118162176

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 11:25/ 0 赞/ 239 阅读

相关网页使用SVG图标

<html> <style> .logo{ background-repeat:no-repeat; background-i

浅浅的花香味﹌/ 2022年05月28日 14:07/ 0 赞/ 227 阅读