如何用图标替换导航栏中的社交媒体链接？

Question

我在外观 > 菜单部分打开了 CSS classes。

我已将社交媒体图标图像放在我的 Tiny Hestia 模板 img 文件夹中，给每个人一个 class 并将以下代码添加到我的子主题 style.css:

.fb-icon a{
 background-image: url(assets/img/fb_icon.png);  
}
  
.ig-icon a{
 background-image: url(assets/img/ig_icon.png); 
}
 
.tw-icon a{
 background-image: url(assets/img/tw_icon.png);  
}

我的导航栏目前看起来可以看到图像并正在链接它们，但可能是格式错误或需要更多样式？

my navbar

我基本上希望社交媒体图标成为我的粘性导航的一部分，并且只显示为图标（没有文字）

谢谢

Answer 1

定义图像宽度和尺寸

要使图标适合导航栏，您必须调整它们的大小以使其适合。

最佳做法是使用 HTML height 和 width，但如果您可以仅使用 CSS height 和 width.

例子：

注意：使用正确的图片高度和宽度

.fb-icon a{
    background-image: url(assets/img/fb_icon.png);
    height:32px;
    width:32px  
}

.ig-icon a{
    background-image: url(assets/img/ig_icon.png);
    height:32px;
    width:32px  
}
.tw-icon a{
    background-image: url(assets/img/tw_icon.png);
    height:32px;
    width:32px  
}

或

.fb-icon a, .ig-icon a, .tw-icon a {
        height:32px;
        width:32px  
}

Answer 2

除了设置 div 大小（来自 Invariant Change 的 post），您可能还想添加 font-size:0; 来隐藏文本和 background-position: center; 以便图标居中.此外，如果您的图标尺寸不适合小按钮，您可以添加 background-size: contain; 或 background-size: 32px; - 第一个不会让它们溢出，第二个让您设置固定大小。

编辑：我忘记了 background-repeat: no-repeat; 这很重要，因为 background-image 的默认行为是重复的（这对 tiled/pattern 背景很有用，但对徽标不太适用）。 :)

因此您的结果代码将是：

    .fb-icon a {background-image: url(assets/img/fb_icon.png);} 
    .ig-icon a {background-image: url(assets/img/ig_icon.png);}
    .tw-icon a {background-image: url(assets/img/tw_icon.png);}
    .fb-icon a, .ig-icon a, .tw-icon a {
        height:32px;
        width:32px;
        font-size:0;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

如何用图标替换导航栏中的社交媒体链接？

How do i replace social media links in navbar with icons?

css

wordpress

icons

social-media

sticky

定义图像宽度和尺寸