Big Cartel Ranger主题页脚社交导航修改求助：替换Twitter图标为信封图标并将邮件列表移至首位

嘿，我完全懂你这种对着代码试来试去还是没搞定的挫败感！咱们一步一步来解决你的问题——把邮件列表挪到社交链接最前面，再把讨厌的Twitter图标换成信封图标。

第一步：把邮件列表移到社交链接首位 #

现在你的代码是按照Twitter、Facebook、Instagram的顺序渲染的，所以只要把你改了标题的邮件列表那段代码，挪到<ul class="social-icons">标签之后的第一个位置就行。比如原来的结构是：

<ul class="social-icons">
  {% if theme.twitter_url != blank %}
  <!-- 你的邮件列表代码 -->
  {% endif %}
  {% if theme.facebook_url != blank %}
  <!-- Facebook代码 -->
  {% endif %}
  ...
</ul>

你把邮件列表的{% if ... %}块整个移到最前面，变成：

<ul class="social-icons">
  <!-- 先放邮件列表 -->
  {% if theme.twitter_url != blank %}
  <li><a href="{{ theme.twitter_url }}" title="Mailing List">
    <!-- 图标部分后面改 -->
    <span>Mailing List</span>
  </a></li>
  {% endif %}
  <!-- 再放其他社交链接 -->
  {% if theme.facebook_url != blank %}
  ...
  {% endif %}
</ul>

这样渲染出来，邮件列表就会是第一个显示的社交链接了。

第二步：替换Twitter图标为信封图标 #

你之前试了换图片链接没成功，是因为原来的图标是内嵌的SVG，不是图片。这里有两种简单的方法：

方法1：用内嵌的信封SVG（推荐，和原有图标样式统一）

直接把原来的Twitter SVG代码替换成信封的SVG代码就行，我给你找了一个和原来Twitter图标尺寸一致的信封SVG，直接替换：

<li><a href="{{ theme.twitter_url }}" title="Mailing List">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
  </svg>
  <span>Mailing List</span>
</a></li>

这个SVG会自动继承你原来CSS里设置的颜色、大小、hover效果，不用额外改样式，完美适配。

方法2：用你自己的信封图片

如果你想用自己的信封图片，需要调整HTML和CSS：

1. 先把原来的SVG部分换成<img>标签，注意要用图片的直接访问链接（比如上传到Big Cartel的文件管理里获取直链）：

<li><a href="{{ theme.twitter_url }}" title="Mailing List">
  <img src="你的信封图片直链" alt="Envelope" class="envelope-icon">
  <span>Mailing List</span>
</a></li>

2. 然后在你的CSS里添加这段样式，让图片和其他图标保持一样的大小、位置和hover效果：

.footernav ul.social-icons li a img.envelope-icon {
  height: 16px;
  width: 16px;
  opacity: 0.6;
  position: relative;
  top: 3px;
  transition: 0.1s ease-in-out;
}
.footernav ul.social-icons li a:hover img.envelope-icon {
  opacity: 1;
}

额外建议：避免后续冲突 #

你现在是复用了Twitter的设置项来放邮件列表，以后如果想加真正的Twitter链接就会冲突。最好的办法是直接在社交列表里添加一个独立的邮件列表链接，不用依赖theme.twitter_url，比如：

<ul class="social-icons">
  <!-- 独立的邮件列表链接 -->
  <li><a href="你的邮件列表链接" title="Mailing List">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
    </svg>
    <span>Mailing List</span>
  </a></li>
  <!-- 原来的其他社交链接 -->
  {% if theme.twitter_url != blank %}
  <!-- Twitter链接代码 -->
  {% endif %}
  {% if theme.facebook_url != blank %}
  ...
  {% endif %}
</ul>

这样以后你在Big Cartel设置里加Twitter链接，就会正常显示，不会和邮件列表混淆了。

慢慢来，每改一步都预览一下，应该就能搞定啦！

备注：内容来源于stack exchange，提问作者Ruthie Fn