### [B2 Pro 主题图标优化](https://guaqi.com/article/51167)

**Published:** 2021-05-28T08:14:49

**Author:** 娃哈哈喝牛奶

**Excerpt:** 现在B2主题UI优化了许多细节，但还是有些细节春哥没来得及优化，比如图标，现在图标看起来没有整体性。所以今天就分享一下我自己的使用的一套图标。这套图标没有全部替换春哥的图标库，有些图标春哥用的非常好，所以我就没有修改。该图标春哥可能会引用（也可能不会）~ 现在废话不多说，下面是教程： 1、添加iconfont图标库的链接 打开子主题文件中的 b2child/style.css，在style.css中添加以下代码 注意：这行代码必须放在所有代码的最上面，也就是说把它放在“下面是您自己DIY的css样式代码”这行注释代

现在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;
        }
```

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

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

**Categories:** 教程文章

**Comments:** 

**可口可乐:** 是的

**深海里的鱼:** 春哥，这个弄了吗。。

**PowerBelief9133:** ![](https://static.7b2.com/wp-content/uploads/2021/09/91336e69ba2d00135_51167_comment_drawing.png)

**wujie:** ![](https://static.7b2.com/wp-content/uploads/2021/07/343010636ddadcf53_51167_comment_drawing.png)

**乐于助人的华夏:** ![](https://static.7b2.com/wp-content/uploads/2021/06/9752675eda10cda80_51167_comment_drawing.png)

**十三亿少女的梦:** 信春哥得永生

**AndyZGS:** 没有效果图，看不到效果呢

**噢吼:** 我看菜单也需要设计一下?

**娃哈哈喝牛奶:** vip.uiba.cc

**祉呈:** 应该把优化后的效果也截个图出来就最好了?



---