Question

我已在“外观”>“菜单”部分中打开了CSS类。

我已将社交媒体图标图像放入Tiny Hestia模板img文件夹中，给每个人一个类，然后将以下代码添加到我的子主题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就可以摆脱困境。

EXMAPLE：

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

.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的帖子）之外，您可能还想添加font-size:0;来隐藏文本和background-position: center;以便图标居中。另外，如果您的图标尺寸不足以适合小按钮，则可以添加background-size: contain;或background-size: 32px;-第一个图标不会溢出，第二个图标则设置为固定大小。

编辑：我忘记了background-repeat: no-repeat;，这很重要，因为背景图像的默认行为是重复（这对平铺/图案背景很有用，而对徽标则不那么有用）。：）

因此，您得到的代码将是：

    .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;
    }

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

2 个答案:

定义图像的宽度和大小