B2 Pro 主题图标优化

现在B2主题UI优化了许多细节，但还是有些细节春哥没来得及优化，比如图标，现在图标看起来没有整体性。所以今天就分享一下我自己的使用的一套图标。这套图标没有全部替换春哥的图标库，有些图标春哥用的非常好，所以我就没有修改。该图标春哥可能会引用（也可能不会）~

现在废话不多说，下面是教程：

所有的修改都是在子主题上面修改！

1、添加iconfont图标库的链接

打开子主题文件中的 b2child/style.css，在style.css中添加以下代码

@import "//at.alicdn.com/t/font_2564532_w2cg3n5fusq.css";

注意：这行代码必须放在所有代码的最上面，也就是说把它放在“下面是您自己DIY的css样式代码”这行注释代码的下面就行。

这是我的iconfont项目链接，大家可以使用，项目里面图标修改项目链接也会修改，所以上面的链接随时会修改，修改链接我会在更新记录里面说明。如果大家想要使用自己的链接或者添加修改一些图标，可以下载我的这套图标，然后上传到自己iconfont项目中去。下面是下载链接：

2、优化css样式

这是网站图标优化样式，修改了一下图标看着比较别扭的css样式。

.bar-item i{
        font-weight: 400;
    }
    .post-content-footer button i, .post-content-footer .content-footer-zan-cai i{
        font-size: 25px;
        color: #494B4D; /*修改颜色*/
    }
    .change-theme button i{
        font-size: 24px;
    }
    i.b2-vrenzhengguanli{
        font-size: 14px;
        text-align: center;
    }
    .w-a-info p i.b2-vrenzhengguanli{
        font-size: 20px;
    }
    .login-eye{
        color: #515A6E;
    }
    .login-eye i{
        font-size: 20px;
        line-height: 35px;
    }
    .post-list-meta li span i{
        font-size: 14px;
        margin-right: 2px;
    }
    .post-meta li span i{
        font-size: 14px;
        margin-right: 2px;
    }
        /*优化积分图标相关联的其他模块*/
        .user-mission-info-right span i{
            margin-right: 2px;
        }
        .user-mission-info-right span, .user-mission-info-right{
            font-size: 14px;
        }
        /*文章内页喜欢图标优化*/
        .post-content-footer .content-footer-zan-cai span{
            margin-right: 0;
            width: 48px;
            height: 48px;
            padding: 0;
            text-align: center;
            display: block;
            border-radius: 100%;
            box-shadow: 0 4px 16px 0 rgb(13 39 91 / 6%);
            background: #fff;
        }
        .content-footer-zan-cai span i{
            line-height: 48px;
        }
        .content-footer-poster .favorite-button.sc i{
            color: #FF9900;
        }
        .content-footer-zan-cai span b{
            display: block;
            color: #494B4D;
            margin-top: 6px;
        }
        .content-footer-zan-cai span.picked i{
            color: #FF3355 !important;
        }
        .post-content-footer .content-footer-poster button{
            margin-bottom: 18px;
        }
        .post-content-footer .content-footer-zan-cai{
            margin-top: 0;
        }
        /*我的、个人中心页面图标优化*/
        .user-sidebar-info .b2-light{   /*去掉了个人中心左侧导航图标下面的圆圈*/
            background: #fff;
        }
        .user-sidebar-info p i{
            color: #494B4D !important;
        }
        .user-sidebar-info.active p i{
            color: #0066FF !important;
        }

以上是我的修改样式，具体请根据自己网站样式二次修改。

至此教程结束，感谢阅读。如果对本教程有疑问或建议请在下面留言~