Resize html set icons and delete underlines under icons

Store Design
, , , ,
1

我想调整 html 设置中的图标大小并删除图标下的下划线，我使用以下代码但它不起作用，网站上的社交图标大小仍然固定，下划线始终存在

<元名称=“视口” 内容=“宽度=设备宽度，初始比例=1”><
链接 rel=“样式表” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

.social-icons-container { display： flex; 对齐项：居中; 理由内容：灵活启动; } .社交图标 { 过渡：颜色 0.2s; 列表样式：无; 右边距：10px; 文本装饰：无 ！重要; **字体大小：3rem;** } **.social-icon：hover { color： #000000; }**
< a class=“social-icon” href=“[https://line.me/R/ti/p/%40216jcszk](https://line.me/R/ti/p/%40216jcszk”)” target=“blank”>< i class=“fa-brands fa-line fa-2xl” style=“color： #03c552;”>< /a>< a class=“social-icon” href=“[https://twitter.com/dcodeyt](https://twitter.com/dcodeyt”)” target=“blank”> < /a> < /a>
2

Hi @nonnico Just copy and paste below css in your CSS file

.social-icon{
text-decoration: none;
}

Please let me know if works and please like and mark as solve!

3

Nonico你好！

你可以给我你的店铺网址吗？ 图标样式可以很方便的通过CSS修改，但是你把CSS写成中文就很奇怪了，你不应该这样做。

4

我在提供的代码中有此代码，但它不起作用，这就是我要问的，为什么我添加了 .social-icon{
text-decoration：none; 没有效果

5
6

Hello @nonnico

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.t4s-rte a:not(.btn):not(.t4s-link):not(.t4s-btn):not(.t4s-button):not(.t4s-a) {
    border-bottom: 0px !important;
}
7

从“Admin”页面 > 在线商店 (Online store) > 编辑Code.

在 Assets 文件夹中找到文件“base.css”， 然后将此这段code复制并粘贴到底部：

#t4s-footer .t4s-footer i {
font-size: 30px;
}

#t4s-footer .social-icon {
border: none !important;
}

用你想要的尺寸替换“30px”
使用“text-decoration: none”将不起作用，因为这是 FontAwesone 图标的“边框”

Image 17-04-2023 at 15.33.jpeg
Image 17-04-2023 at 15.33.jpeg2536×608 59.7 KB

8

And what about resizing?

9

Thank you, it worked. Also I would like to ask how the same problem should be solved in the following words on the Thank you, it worked. Also I would like to ask how the same problem should be solved in the following words on the product page, also the social icons

Product link https://nonnico.com/collections/alpha/products/alpha-vape-gold?variant=43013996904599product page, also the social icons

Product link https://nonnico.com/collections/alpha/products/alpha-vape-gold?variant=43013996904599

10

Hello
After I used the code you provided, my Page heading section became right-handed and I can’t restore it.