Как заменить ссылки на социальные сети в навигационной панели значками? - PullRequest
Новая
       69

Как заменить ссылки на социальные сети в навигационной панели значками?

0 голосов
/ 11 сентября 2018

Я включил классы CSS в разделе Внешний вид> Меню.

Я поместил изображения значков социальных сетей в папку img шаблона Tiny Hestia, дал каждому класс и добавил следующий код в мою дочернюю тему 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);		
}

Моя навигационная панель в настоящее время выглядит так, как будто она может видеть изображения и связывает их, но, возможно, формат неправильный или требуется дополнительная стилизация?

моя навигационная панель

Я хочу, чтобы значки социальных сетей были частью моей липкой навигации и отображались в виде значков (без текста)

Спасибо

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Помимо установки размера 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;
    }
0 голосов
/ 11 сентября 2018

Определить ширину и размер изображения

Чтобы иконки поместились на панели навигации, вам необходимо подобрать их по размеру.

Лучше всего использовать 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  
}
...