「反馈 Bug」steam图标偏上

[ted423]

「描述遇到的问题」或「发现的 bug」（Describe the problem or bug you encounter）

你是否已经阅读过以下内容，并确认你的行为是正确的，在 [ ] 中填入 x 选中（Ensure that you had consulted followings and confirm the validity of your operation, fill x in [ ] to select）

• Hexo 文档 | Hexo document
• Archer 文档 | hexo-theme-archer document

如何复现（To Reproduce）

存在问题或 bug 的已部署上线的页面地址（A deployed page link that with bug or problem）

https://ted423.github.io/
如果可能是与 markdown 内容相关的问题或 bug，请粘贴对应的 markdown 内容（If the problem or bug that may be related to markdown, paste it here）

打开控制台，填写控制台中打印的主题的版本，如果脚本出错可直接提供控制台截图（Open the console and report the version of hexo-theme-archer. You can paste the screenshot on console directly if there is error with script）
🎯 hexo-theme-archer ⬇️
main.js:3190 🏷 Version: 1.6.1
main.js:3191 📅 Version date: 20210204

信息 (please complete the following information):

• 操作系统（OS）:win和安卓看了都有问题
• 浏览器（Browser） chrome
• 浏览器版本（Version）[e.g. 22][可选]

其他信息（Additional context）

[Stark-X]

你是指 主页个人信息下方的 steam 图标吗？下次提 issue 可以一并提供截图

[ted423]

你是指 主页个人信息下方的 steam 图标吗？下次提 issue 可以一并提供截图

截了。。。可能太小了
https://user-images.githubusercontent.com/7042766/121491123-402a5f80-ca08-11eb-9ad2-8588bd1ccaa7.png

[Stark-X]

哦哦，昨天看的时候，图片没加载出来

[ted423]

才发现底部也有类似问题

并且能感觉到Github偏大，其本身style设置似乎大小就不一样

[LolipopJ]

对这些图标来自编码层面的基准处理是相同的：

// src/scss/_variables.scss
.iconfont-archer {
  font-family: 'iconfont-archer' !important;
  font-size: 1rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// src/scss/_partial/_partial/_profile.scss
.profile-social {
  position: relative;
  width: 100%;
  text-align: left;
  line-height: 1.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .iconfont-archer {
    position: relative;
  }
  @include social($scaleSize: 0.5, $spanMargin: 0.4rem);
}

问题出在 Font Awsome 图标库，对于这个库，看到有这样一个评价：

fa iconfont 整体质量不高，更多的是以量取胜（你能想到的他基本都有）。比如大小不一的问题，有时你不得不把某些图标的字体设置的更大一些，以保证图标看起来差不多大。

这意味着，如果我们接着使用这个图标库，为了处理大小不同的问题，需要在找到基准图标后，单独为每个图标设置 CSS：在 src/scss/_mixin.scss 中设置。

但显然现在仍存在问题。为了兼容性更好的变更，无论是已有用户亦或是已有代码，可以进一步基于此 CSS 文件进行修改。直到整体的设计符合视觉美感。

亦或是切换使用其它设计更规范的图标库，来避免这样的问题，例如 Material Design Icon，这是它的社区版清单。

[ted423]

对这些图标来自编码层面的基准处理是相同的：

// src/scss/_variables.scss
.iconfont-archer {
  font-family: 'iconfont-archer' !important;
  font-size: 1rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// src/scss/_partial/_partial/_profile.scss
.profile-social {
  position: relative;
  width: 100%;
  text-align: left;
  line-height: 1.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .iconfont-archer {
    position: relative;
  }
  @include social($scaleSize: 0.5, $spanMargin: 0.4rem);
}

问题出在 Font Awsome 图标库，对于这个库，看到有这样一个评价：

fa iconfont 整体质量不高，更多的是以量取胜（你能想到的他基本都有）。比如大小不一的问题，有时你不得不把某些图标的字体设置的更大一些，以保证图标看起来差不多大。

这意味着，如果我们接着使用这个图标库，为了处理大小不同的问题，需要在找到基准图标后，单独为每个图标设置 CSS：在 src/scss/_mixin.scss 中设置。

但显然现在仍存在问题。为了兼容性更好的变更，无论是已有用户亦或是已有代码，可以进一步基于此 CSS 文件进行修改。直到整体的设计符合视觉美感。

亦或是切换使用其它设计更规范的图标库，来避免这样的问题，例如 Material Design Icon，这是它的社区版清单。

看了一下你给的这个,看起来里面并没有github和steam图标。
所以目前是后续有改进计划，还是需要用户自己进行调整？
如果有相关pr是会通过么？

[LolipopJ]

看了一下你给的这个,看起来里面并没有github和steam图标。

社区版的 Material Design Icon 是包括有 Github 和 Steam 图标的，可以使用 https://materialdesignicons.com/ 进行搜索（加载略慢）。

官方版本倒是没有包含。

所以目前是后续有改进计划，还是需要用户自己进行调整？

为了减少破坏性改动，目前本项目应该还是基于 Font Awsome 5 进行开发，但缺少活跃的维护者，因此更新比较慢……请包涵。

如果有相关pr是会通过么？

当然，欢迎您的贡献！😀

目前暂无计划切换至其它图标库，您可以尝试修改 SCSS 文件，来修复对齐的问题！

[ted423]

我会尝试一下，因为属于业余爱好者