矢量图标

对以前的社交图标有些审美疲劳了(( /ω＼ )其实是发现了问题)，优化一下。 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 来源： CSDN 作者： 本该如此 链接： https://blog.csdn.net/qq_40922859/article/details/104635886

挑选图标的过程（共6步） 进入网站：Iconfont网址：http://www.iconfont.cn 点击网站上方的“官方图标库”，选择自己喜欢的图标。在这里我选择天猫的图标库。 选择好自己喜欢的图标，你可以有两个选择，下载代码 和 添加至项目。 我们这两选择添加至项目，然后新建项目，并输入名称。 项目添加好后，会自动给我们转入到我们项目库中。点击查看在线链接。 生产css引入的代码，生成后就可以在项目首页index.html引入了。 <link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css"> 图标的使用： 图标顺利引入到项目中，已经可以使用它们了，在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴，也可以自己写代码。 <i class="icon iconfont icon-hanbao"></i> 　　在各个组件中就可以使用了 这样在页面中就可以看到图标了。 来源： https://www.cnblogs.com/var-chu/p/8693821.html