页面头部TikTok Logo无法显示且与名称不对齐如何修复

修复方案 #

1. 解决Logo无法显示问题 #

• 优先校验本地资源路径是否正确：确认站点images目录下是否存在TikTok-Icon-Logo.wine.svg文件，注意Linux服务器对文件名大小写敏感，需保证文件名、路径大小写完全匹配。
• 校验资源完整性：直接在浏览器地址栏输入该svg文件的完整访问路径，确认文件可正常打开，若无法打开说明资源本身损坏，需替换为有效的svg文件。

2. 解决Logo与名称不对齐问题 #

原有代码使用float布局，且头部容器没有做对齐适配，块级元素h2默认占满整行导致图标被挤到下一行。改用Flex布局可快速解决对齐问题，修改后的CSS如下：

/* 新增头部容器的flex布局配置 */
.header {
  display: flex;
  /* 两端对齐，名称在左、图标在右 */
  justify-content: space-between;
  /* 垂直方向居中对齐 */
  align-items: center;
  /* 可根据需求调整上下内边距 */
  padding: 1% 0;
}

.name {
  font-size: 250%;
  /* 清除h2默认的上下外边距，避免影响对齐 */
  margin: 0;
}

/* Social Icon */
.tiktok {
  /* 根据视觉需求调整图标大小，原4em尺寸过大 */
  width: 1.8em;
  height: auto;
  /* 删除原有float、position属性 */
}

HTML代码无需修改，替换CSS即可实现对齐效果。如果调整后图标大小不符合预期，可自行修改.tiktok的width值适配。

内容的提问来源于stack exchange，提问作者tretuser