對以前的社交圖標有些審美疲勞了((/ω\)其實是發現了問題),優化一下。
Before ↓
可以看到,矢量圖標有些泛黃,圓形圖標邊框也不太美觀。
Ps:這裏的泛黃,是因爲把"一言"以及"菜單"的hover
設爲了淡黃,優先級定太高了  ̄□ ̄||,
後面針對這個我把每個矢量圖標的:before
都設了白色。
After ↓
是不是好看了點(▽)
修改如下:
這裏以Github圖標爲例,其他的也一樣,打開yilia\source\main.xxxx.css
,
搜索社交圖標名,這裏需要搜 github
- 1、這裏的
border
可以用來移動中心的矢量圖標 - 2、給
:hover
加個同樣背景的顏色
如果想改圖標的形狀,直接搜 #header .header-nav .social a {
,修改邊框半徑 (border-radius
),
大於自身的50%,就是圓形,這裏我改成了10%(方形)。
Finally ↓
添加自己想要的社交圖標,參見:https://anyway1314.cn/post/e4525229.html