前言

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

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

修改主题SVG文件

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

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

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

我们将自己制作或者网上下载的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文件的下载，请点击下载。没分的可以联系我邮箱。

修改icon-functions.php文件

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

function twentyseventeen_social_links_icons()

在该函数中按照样式添加需要链接的网站

添加菜单

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

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

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )
文章目录一.FlutterIcon 下载图标二.自定义 svg 图标生成 ttf 字体文件三.使用下载的 ttf 图标文件四.完整代码示例五.相关资源一.FlutterIcon 下载图标 ...
树形控件中的svg图标的使用
初始样式: 完成之后的样式: 我们需要解决的有以下几点: 先给没有下属节点的对象加上图标如何消除默认的展开收起图标(小三角) 有下属节点的通过是否展开,来修改加号和减号难点一: 如何给没有下属节 ...
超全教授svg图标素材网站整理
教授svg图标素材,我常用的这个网站就挺好的,免费下载,资源多,品质优,而且资源类型都很齐全,要是大家需要可以看一下,真的不骗人!一键打包下载,快捷方便! 在找寻资源的时候,无意中发现了这个网站,资源 ...
良心安利农民svg图标素材网站
家人们,最近我找到了一个很好用的农民svg图标免费素材网站资源贼多,重点是免费!!!嘿嘿嘿!!!感兴趣的可以进去看看本人曾经也是废大把时间寻找资源,质量还不咋地,但是通过朋友安利,知道了一个很好的 ...
运动员svg图标素材推荐精品小众
关于运动员svg图标素材肯定是很多人需要的东西,但是在找的时候总是会碰到各种问题,小编为大家总结了很多种类齐全,免费好用的素材,赶紧围观! 因为小编的工作原因,经常会使用到运动员svg图标素材,所以自 ...
html5 svg 信箱图标,在网页中使用内联SVG图标和字体图标的比较
如果你要在你的网站中创建一个图标系统,你可以有不少的选择.如果你希望使用图片来制作图标,可以使用CSS sprites(CSS雪碧)技术.如果你希望使用矢量图来作为图标(这是时下非常流行的做法),你可 ...
含泪整理最优质老板svg图标素材，你想要的这里都有
今天小编针对老板svg图标素材为大家整理了很多内容哦,肯定有需要的小伙伴吧,实用.免费.优质的素材谁又不心动呢,赶紧码住因为小编的工作原因,经常会使用到老板svg图标素材,所以自己也寻找了很多的相关 ...
php更改导航栏图标,wordpress导航菜单前添加矢量小图标
wordpress导航菜单前的 Icon矢量图标看着很舒服,于是就研究了一下.网上的方法有很多像插件,大多收费并影响服务器,所以不推荐;还有就是在标题前加img标签,好丑的样子,不推荐.最后,一种是最 ...
wordpress菜单显示css字体,WordPress导航菜单图标字体插件font awesome 4 menus
用了wordpress后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果.不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 sh ...
更改html网页的图标大小吗,html-使用path元素调整svg图标的大小
我正在使用一个预先设计的菜单,该菜单已使用svg绘制图标. 由于某些原因,我必须使用path元素更改图标大小. 现在,我想更改图标,并且有自己的自定义图标:因此,即使我使用的是由material de ...

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

前言

修改主题SVG文件

修改icon-functions.php文件

添加菜单

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

最新文章

热门文章