Categorias: CSS

Substituir ícone de rede social por imagem

Escrito por Amanda de Lavra

27 de agosto de 2021

O módulo de redes sociais é bastante limitado quanto à quantidade de redes sociais. Para corrigir isso, o plugin Divi Booster acrescenta uma enormidade de redes. Eu precisava do Imdb e estava disponível. Porém, o ícone ficou ilegível no computador e, mesmo aumentando a fonte, não ficava bom. Para corrigir isso, decidi substituir o ícone por uma imagem. Eu redimensionei a imagem para ela ficar com a altura de 16px, o mesmo da fonte dos ícones, mas tive que ajustar a largura para 38px, pois esse era o tamanho da imagem. Segue o código:

/*Ícones de redes sociais - aumentar quadrado do ícone*/
ul.et_pb_social_media_follow li.et-social-dbdb-imdb a {
	width: 38px;
	padding: 0 3px;
}

/*Ícones de redes sociais - substituir ícone do Imdb por imagem*/
ul.et_pb_social_media_follow li.et-social-dbdb-imdb a:before {
	content: url(https://danielasavassi.com/wp-content/uploads/imdb-16.png);
}

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....