「反馈 Bug」steam图标偏上

ted423 commented 3 years ago

「描述遇到的问题」或「发现的 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）

如何复现（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 commented 3 years ago

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

ted423 commented 3 years ago

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

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

Stark-X commented 3 years ago

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

ted423 commented 2 years ago

才发现底部也有类似问题并且能感觉到Github偏大，其本身style设置似乎大小就不一样

LolipopJ commented 2 years ago

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

// 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 commented 2 years ago

对这些图标来自编码层面的基准处理是相同的：
// 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 commented 2 years ago

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

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

官方版本倒是没有包含。

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

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

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

当然，欢迎您的贡献！😀

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

ted423 commented 2 years ago

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

fi3ework / hexo-theme-archer

「反馈 Bug」steam图标偏上 #301