Yilia主题-社交图标优化

本文介绍了如何优化Yilia主题中的社交图标,解决了矢量图标泛黄和圆形图标边框不美观的问题。通过调整矢量图标的颜色、设置背景及修改边框半径,实现了图标样式的改进,使其更加美观。
摘要由CSDN通过智能技术生成

pxfasjfasedbf.jpg

对以前的社交图标有些审美疲劳了((/ω\)其实是发现了问题),优化一下。

Before ↓

可以看到,矢量图标有些泛黄,圆形图标边框也不太美观。

GIF2020030303.gif

Ps:这里的泛黄,是因为把"一言"以及"菜单"的hover设为了淡黄,优先级定太高了  ̄□ ̄||,
后面针对这个我把每个矢量图标的:before都设了白色。

20200303162113.png

After ↓

是不是好看了点()

GIF20200303.gif

修改如下:

这里以Github图标为例,其他的也一样,打开yilia\source\main.xxxx.css,
搜索社交图标名,这里需要搜 github

20200303163046.png

  • 1、这里的 border 可以用来移动中心的矢量图标
  • 2、给 :hover 加个同样背景的颜色

如果想改图标的形状,直接搜 #header .header-nav .social a {,修改边框半径 (border-radius),
大于自身的50%,就是圆形,这里我改成了10%(方形)。

20200303164123.png

Finally ↓

GIF202020sskf.gif

添加自己想要的社交图标,参见:https://anyway1314.cn/post/e4525229.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值