【问题标题】:removing twitter icon on big Cartel footer nav删除大卡特尔页脚导航上的推特图标
【发布时间】:2023-01-25 02:05:27
【问题描述】:

使用 Big Cartel Ranger 主题。我希望在页脚导航的社交链接顶部有邮件列表,最好带有信封图标。它有twitter图标的原因是因为它是通过big Cartel中的基本设置输入的,我只是通过布局代码将标题从Twitter修改为Mailing List,见screengrab: []

请耐心等待!我通过试验和*主要是*错误,偶然发现了任何代码更改!

我一直在联系 Big Cartel 支持,他们要求我删除与 twitter 相关的布局代码(粘贴在下面)并放入一个简单的链接,这显然不起作用。下面是与 footernav 上的 Twitter 链接相关的编码。

{% if theme.twitter_url != blank or theme.facebook_url != blank or theme.instagram_url != blank or theme.tumblr_url != blank or theme.pinterest_url != blank %}
\<nav class="footernav"aria-label="Footer social media navigation"\>
\<div class="footer-nav-title"\>Social\</div\>
<ul class="social-icons">
{% if theme.twitter_url != blank %}
<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="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.61 1.798-1.574 2.165-2.724-.95.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.18 0-5.515 2.966-4.797 6.045C7.727 8.088 4.1 6.128 1.67 3.15.38 5.36 1.003 8.256 3.195 9.722c-.806-.026-1.566-.247-2.23-.616-.053 2.28 1.582 4.415 3.95 4.89-.693.188-1.452.232-2.224.084.626 1.957 2.444 3.38 4.6 3.42-2.07 1.623-4.678 2.348-7.29 2.04 2.18 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.72 13.995-14.646.962-.695 1.797-1.562 2.457-2.55z"/\>\</svg\>\<span\>Mailing List\</span\></a></li>
{% endif %}

如上,我只是将标题修改为来自推特的Mailing List。 我还尝试删除 w3.org 链接并输入我的图像链接,如下所示:https://www.dropbox.com/s/rtxpa88q75wpmz2/Envelope.jpg?dl=0 但图标仍然存在。 我还删除了从 <svg 到 </svg> 的所有内容,并删除了图标。 然后我尝试输入我的保管箱链接并删除 <path to z"/> 并且它没有进一步改变任何东西。

我认为它需要进一步改变 CSS。有一个部分提到了社交图标,似乎所有图标都“锁定”在它们的 w3.org 链接中,在这种情况下,我认为我无法更改它:

.footernav ul.social-icons {
list-style: none;
margin: 0;
padding: 0;
}
.footernav ul.social-icons li {
display: block;
}
.footernav ul.social-icons li a {
color: {{ theme.accent_text_color }};
display: block;
}
.footernav ul.social-icons li a span {
display: inline-block;
margin-left: 8px;
}
.footernav ul.social-icons li a svg {
\-webkit-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
display: inline-block;
fill: {{ theme.accent_text_color }};
height: 16px;
opacity: 0.6;
position: relative;
top: 3px;
width: 16px;
}
.footernav ul.social-icons li a:hover svg {
opacity: 1;
}

任何帮助表示赞赏,在此先感谢!

【问题讨论】:

    标签: graphics icons footer bigcartel


    【解决方案1】:

    当我编辑自己的图标时,我花了一段时间才弄清楚这个,但它很容易改变!对于这个特定主题(假设它是 Ranger 主题),您需要在布局下更改两个 Twitter 代码位。

    因此,要切换与 Twitter 链接关联的图标,您需要在布局的第 147 行和第 252 行(取决于您是否实现了更多代码)或周围取出此 SVG 代码:

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.61 1.798-1.574 2.165-2.724-.95.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.18 0-5.515 2.966-4.797 6.045C7.727 8.088 4.1 6.128 1.67 3.15.38 5.36 1.003 8.256 3.195 9.722c-.806-.026-1.566-.247-2.23-.616-.053 2.28 1.582 4.415 3.95 4.89-.693.188-1.452.232-2.224.084.626 1.957 2.444 3.38 4.6 3.42-2.07 1.623-4.678 2.348-7.29 2.04 2.18 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.72 13.995-14.646.962-.695 1.797-1.562 2.457-2.55z"/></svg>
    

    一定要在它们周围留下 <a> 标签!现在,您需要在这两个地方用以下内容替换那些 SVG 代码位,我使用了 Font Awesome 的免费信封图标:

    <svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
    

    这应该可以让您在桌面和移动设备上使用该信封获得您想要的结果。 :) 让我知道这是否适合您!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-08-26
      相关资源
      最近更新 更多