社交站点小图标

[liliangqi]

您好，请问该主题如何添加社交站点小图标，比如GitHub、微博和邮箱之类的，能附上链接的小图标

[iTimeTraveler]

hi, @liliangqi ，我刚在侧边栏添上了社交站点的栏目，你更新下看看吧

[liliangqi]

@iTimeTraveler 太感谢啦，回复和修改都好快，我已经更新了，图标做得很漂亮！
但还有个小建议，就是把站点图标放在side bar里面的话，就只能在“归档”页面才看得到，如果放在主页的导航栏里（在首页 归档``分类``标签``关于的后面），就更加方便读者跟作者联系啦。当然导航栏放太多会不好看，所以只放最关键的一两个比如邮箱和GitHub。
我自己也折腾了一下但没弄好，还是向原作者请教一下，请您不吝赐教

[iTimeTraveler]

@liliangqi 的确，放在导航栏后边可能显得导航栏太长不太好看，你可以先自己试着改改。

大概在 layout/_partial/header-post.ejs 文件中的第31行之后，仿照layout/_widget/social.ejs 文件，添加像下面示例代码这样的列表元素，然后看着再调调css样式就可以了。

<li>
    <a href="https://github.com/liliangqi" title="Github">         <!-- 链接 -->
        <i class="fa fa-github" aria-hidden="true"></i>            <!-- FontAwesome图标 -->
    </a>
</li>

注意这里并没有显示在首页的导航栏，首页的header是在 layout/_partial/header.ejs 文件中的最后一段修改。

[liliangqi]

@iTimeTraveler 首页导航栏添加小图标已经在我的博客实现，但还是想问如何将该图标的位置移到导航栏最右端，类似于这篇博客

[iTimeTraveler]

@liliangqi hello，这个布局技巧是CSS flex-grow 属性和flex-shrink 属性，具体改动代码建议你加到source/css/home.css样式文件里。

可以参考你贴的这个博客的布局代码，你试试吧

#nav ul.links {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;               <!-- 注意这里 -->
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;                <!-- 注意这里 -->
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-shrink: 1;
    flex-shrink: 1;               <!-- 注意这里 -->
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    letter-spacing: 0.075em;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    text-transform: uppercase;
}

[liliangqi]

好的，谢谢

[LiuHDme]

把小图标移到导航栏最右边要改的好像挺多的，我没系统学过 css，一时半会儿也实现不了😂