8722 sujets

Développement web côté serveur, CMS

Problème affichage "social menu" theme wordpress Hitchcock

Pages :
Bonjour à toutes et à tous,

Je suis actuellement en train de bidouiller un thème enfant wordpress à partir d'un thème parent appelé "Hitchcock".

Malgré tous mes efforts et investigations dans le code je n'arrive pas à régler le problème d'affichage lié au "social menu" prédéfinis par le thème. En effet, que j'ajoute du texte ou une AwesomeFont dans "le titre de navigation", j'obtiens - visuellement - toujours le même résultat :

http://image.noelshack.com/fichiers/2018/47/3/1542789628-capture-d-ecran-2018-11-21-a-09-45-07.png

Des rectangles sauvages apparaissent ! Voici ce que dises les codes .php et .css relatifs à la zone incriminée : 

/* ---------------------------------------------------------------------------------------------
   ENQUEUE STYLES
   --------------------------------------------------------------------------------------------- */


if ( ! function_exists( 'hitchcock_load_style' ) ) {

	function hitchcock_load_style() {
		if ( ! is_admin() ) {

			$dependencies = array();

			/**
			 * Translators: If there are characters in your language that are not
			 * supported by the theme fonts, translate this to 'off'. Do not translate
			 * into your own language.
			 */
			$google_fonts = _x( 'on', 'Google Fonts: on or off', 'hitchcock' );

			if ( 'off' !== $google_fonts ) {

				// Register Google Fonts
				wp_register_style( 'hitchcock_google_fonts', '//fonts.googleapis.com/css?family=Montserrat:400,400italic,500,600,700,700italic|Droid+Serif:400,400italic,700,700italic', false, 1.0, 'all' );
				$dependencies[] = 'hitchcock_google_fonts';

			}

			wp_register_style( 'hitchcock_fontawesome', get_stylesheet_directory_uri() . '/fa/css/font-awesome.css' );
			$dependencies[] = 'hitchcock_fontawesome';
			
			wp_enqueue_style( 'hitchcock_style', get_stylesheet_uri(), $dependencies );
		}
	}
	add_action( 'wp_print_styles', 'hitchcock_load_style' );

}



.social-menu a {
	display: block;
	width: 36px;
	height: 36px;
	background: #2d2d2d;
	border-radius: 99px;
	color: #fff;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.social-menu a:hover { 
	background: #3bc492;
	color: #fff; 
}

.social-menu li a::before {
	content: '\f408';
	display: inline-block;
	font-family: 'FontAwesome';
	font-size: 16px;
	text-align: center;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 0;
	right: 0;
}

.wp-is-mobile .social-menu li a::before { margin-top: -7px; }



.social-menu li a[href*="codepen.io"]::before { content: '\f1cb'; }
.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }
.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
.social-menu li a[href*="github.com"]::before { content: '\f09b'; }
.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }
.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }
.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.social-menu li a[href*="soundcloud.com"]::before { content: '\f1be'; }
.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }
.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }
.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }
.social-menu li a[href*="wordpress.org"]::before,
.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }
.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }
.social-menu li a[href*="mailto"]::before { content: '\f0e0'; }


Ainsi qu'un screen d'un dossier que j'ai trouvé dans le thème. Dans lequel était contenu quelques Awesome Font :

http://image.noelshack.com/fichiers/2018/47/3/1542790144-capture-d-ecran-2018-11-21-a-09-56-57.png

Ce problème a été survolé dans le "forum de support" à cette adresse - mais cela ne fait pas effet de mon côté ...

Aussi je remercie par avance celui ou celle qui prendra 1) le temps de lire ce post et surtout 2) celui de m'aider, car je ... désespère Smiley bawling

Luchis
Modifié par Luchis (21 Nov 2018 - 15:02)
Bonjour à tous,

Je me permets de revenir vers vous concernant ce soucis, pas d'idées ? De pistes ? Je continues à explorer de mon côté mais toujours rien ...

Bonne journée,

Luchis
Bonjour à tous,

Mon soucis est toujours d'actu' malgré toutes mes recherches. Smiley bawling

Merci par avance !
Bonjour,

Mon soucis est toujours d'actualité ! En vous remerciant par avance,

Belle journée à tous,

Luchis
Modérateur
Bonjour,

Est-ce que tu arrives à faire afficher quelque chose avec FontAwesome dans une page toute bête (sans le framework) ?

EDIT: question subsidiaire : tu as quoi comme version de font awesome, et est-ce que tu es sûr que la font-family de ta version est FontAwesome ?

EDIT: question subsidiaire : est-ce que les caractères que tu essaies d'utiliser sont bien dans ta version de FontAwesome ?

Amicalement,
Modifié par parsimonhi (12 Dec 2018 - 21:29)
Bonjour Parsimonhi,

Et merci d'avoir pris le temps de me répondre et m'aider. Voici le point :

1 ) Est-ce que tu arrives à faire afficher quelque chose avec FontAwesome dans une page toute bête (sans le framework) ? Malheuresement ... non, si j'insère le code 
<i class="fab fa-facebook"></i>
sur un article - par exemple - c'est un triangle qui apparait à la place.

2 ) Question subsidiaire : tu as quoi comme version de font awesome, et est-ce que tu es sûr que la font-family de ta version est FontAwesome ? C'est sur ! Et dans les commentaires du css, il y a une annotation sur la version utilisée : "Font Awesome 4.3.0"

3 ) Question subsidiaire : est-ce que les caractères que tu essaies d'utiliser sont bien dans ta version de FontAwesome ? A priori ... oui ... pour reprendre l'exemple de facebook, la ref est f09a ( listée par là dans le css du thème ".social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }" mais elle ne fonctionne ni dans le social menu, ni dans un article ...

Smiley biggol c'est à devenu fouf !
Modifié par Luchis (21 Jan 2019 - 13:28)
Modérateur
Bonjour,

[quote=Luchis]Malheuresement ... non, si j'insère le code 
&lt;i class="fab fa-facebook"&gt;&lt;/i&gt;
sur un article - par exemple - c'est un triangle qui apparait à la place.

Je voulais dire tester dans une page à part. Exemple de page (mais avec un fontawsome plus récent) :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
.social-menu a {
	display: block;
	width: 36px;
	height: 36px;
	background: #2d2d2d;
	border-radius: 99px;
	color: #fff;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.social-menu a:hover { 
	background: #3bc492;
	color: #fff; 
}
.social-menu li a::before {
	content: '\f408';
	font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
	
	display: inline-block;
	font-size: 16px;
	text-align: center;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 0;
	right: 0;
	
}

.wp-is-mobile .social-menu li a::before { margin-top: -7px; }

.social-menu li a[href*="codepen.io"]::before { content: '\f1cb'; }
.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }
.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
.social-menu li a[href*="github.com"]::before { content: '\f09b'; }
.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }
.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }
.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.social-menu li a[href*="soundcloud.com"]::before { content: '\f1be'; }
.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }
.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }
.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }
.social-menu li a[href*="wordpress.org"]::before,
.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }
.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }
.social-menu li a[href*="mailto"]::before { content: '\f0e0'; }

</style>
</head>
<body>
<ul class="social-menu">
<li><a href="codepen.io"></a></li>
<li><a href="dribbble.com"></a></li>
<li><a href="facebook.com"></a></li>
<li><a href="flickr.com"></a></li>
<li><a href="github.com"></a></li>
<li><a href="instagram.com"></a></li>
<li><a href="linkedin.com"></a></li>
<li><a href="pinterest.com"></a></li>
<li><a href="plus.google.com"></a></li>
<li><a href="soundcloud.com"></a></li>
<li><a href="tumblr.com"></a></li>
<li><a href="twitter.com"></a></li>
<li><a href="vimeo.com"></a></li>
<li><a href="wordpress.com"></a></li>
<li><a href="youtube.com"></a></li>
<li><a href="mailto"></a></li>
</ul>
</body>
</html>


Ensuite, une fois ça acquis, tu peux voir dans ton code ce qu'il faut ajouter/retirer.

Amicalement,
Modérateur
Bonjour,
Luchis a écrit :
2 ) Question subsidiaire : tu as quoi comme version de font awesome, et est-ce que tu es sûr que la font-family de ta version est FontAwesome ? C'est sur ! Et dans les commentaires du css, il y a une annotation sur la version utilisée : "Font Awesome 4.3.0"


Je ne suis pas convaincu par ta réponse.

Il faut aller voir dans le fichier /fa/css/font-awesome.css, rechercher la chaine "font-family" et regarder ce qu'il y a ensuite.

Amicalement,
Bonjour Parsimonhi,

Et merci encore pour ton temps.

Autant pou moi, je n'avais pas bien compris ta question : pas de soucis du côté de l'affichage des FontAwesome sur une page html externe. Je viens de tester pour le font-family, sans succès ...

Du coup, voici le point sur les différentes tentatives amorcées :
- Remplacement du "Font Awesome" par "Font Awesome 5 Free', 'Font Awesome 5 Brands';" dans le font-family - non concluant
- Suppression du fichier "fa" ( comprenant un dossier css et fonts ) - non concluant
- Ajout du code "add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'hitchcock_fontawesome', get_template_directory_uri() . '/fa/css/font-awesome.css' ); }"dans le fichier FUNCTIONS.PHP non concluant
- Remplacement de la ligne php "wp_enqueue_style( 'hitchcock_fontawesome', get_template_directory_uri() . '/fa/css/font-awesome.css' );" par "wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );" non concluant

Smiley biggol
Modifié par Luchis (23 Jan 2019 - 10:40)
Bonjour Parsimonhi,

Merci encore pour ton temps.

Autant pou moi, je n'avais pas bien compris ta question : pas de soucis du côté de l'affichage des FontAwesome sur une page html externe.

Voici le point sur les différentes tentatives amorcées :
- Remplacement du "Font Awesome" par "Font Awesome 5 Free', 'Font Awesome 5 Brands';" dans le font-family - non concluant
- Suppression du fichier "fa" ( comprenant un dossier css et fonts ) - non concluant
- Installation du plugin Font Awesome - non concluant
- Ajout du code "add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'hitchcock_fontawesome', get_template_directory_uri() . '/fa/css/font-awesome.css' ); }"dans le fichier FUNCTIONS.PHP non concluant
- Remplacement de la ligne php "wp_enqueue_style( 'hitchcock_fontawesome', get_template_directory_uri() . '/fa/css/font-awesome.css' );" par "wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' ); non concluant
Modifié par Luchis (23 Jan 2019 - 10:44)
Modérateur
Bonjour,
Luchis a écrit :
Bonjour Parsimonhi,

Et merci encore pour ton temps.

Autant pou moi, je n'avais pas bien compris ta question : pas de soucis du côté de l'affichage des FontAwesome sur une page html externe. Je viens de tester pour le font-family, sans succès ...

Il faut déjà que tu fasses fonctionner le html externe que je t'ai fourni, mais en remplaçant le fontAwesome de ce html par ton fontAwesome à toi (celui qui doit être quelque part dans l'arborescence de ton CMS. Et il faudra sans doute changer le font-family (celui qui est dans mon code HTML fait référence à la version 5 de fontAwesome alors que tu as une version 4). Il y a de grande chance pour que le font family soit "fontAwesome" dans ce cas.

Une fois que ce html fonctionnera avec ton fontAwesome (j'insiste), on pourra avancer.

Amicalement,
Modifié par parsimonhi (23 Jan 2019 - 10:59)
Merci encore pour ton aide,

Je vais essayer de suivre au mieux tes directives. Voici un screenshot du résultat :

https://image.noelshack.com/fichiers/2019/04/3/1548238059-capture-d-ecran-2019-01-23-a-11-14-35.png

Au milieu ton html et à gauche, le css disponible dans le thème Hitchcock.

N : Je me suis trompée dans l'écriture du lien href, apparemment c'est "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" mais le résultat est le même.
Non, malheureusement. Les petits rectangles apparaissent toujours comme sur le screen ;_;

Luchis
Modérateur
Bonjour,

Y a un truc que je ne comprends pas : ton fontAwesome, c'est lequel ?

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css ?

En prenant ce fontAwesome et en utilisant "fontAwesome" dans le font-family du html que je t'ai fourni, chez moi, ça marche. C'est à dire en utilisant exactement le code suivant :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin="anonymous">
<style>
.social-menu a {
	display: block;
	width: 36px;
	height: 36px;
	background: #2d2d2d;
	border-radius: 99px;
	color: #fff;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.social-menu a:hover { 
	background: #3bc492;
	color: #fff; 
}
.social-menu li a::before {
	content: '\f408';
	font-family: 'fontAwesome';
	
	display: inline-block;
	font-size: 16px;
	text-align: center;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 0;
	right: 0;
	
}

.wp-is-mobile .social-menu li a::before { margin-top: -7px; }

.social-menu li a[href*="codepen.io"]::before { content: '\f1cb'; }
.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }
.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
.social-menu li a[href*="github.com"]::before { content: '\f09b'; }
.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }
.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }
.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.social-menu li a[href*="soundcloud.com"]::before { content: '\f1be'; }
.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }
.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }
.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }
.social-menu li a[href*="wordpress.org"]::before,
.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }
.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }
.social-menu li a[href*="mailto"]::before { content: '\f0e0'; }

</style>
</head>
<body>
<ul class="social-menu">
<li><a href="codepen.io"></a></li>
<li><a href="dribbble.com"></a></li>
<li><a href="facebook.com"></a></li>
<li><a href="flickr.com"></a></li>
<li><a href="github.com"></a></li>
<li><a href="instagram.com"></a></li>
<li><a href="linkedin.com"></a></li>
<li><a href="pinterest.com"></a></li>
<li><a href="plus.google.com"></a></li>
<li><a href="soundcloud.com"></a></li>
<li><a href="tumblr.com"></a></li>
<li><a href="twitter.com"></a></li>
<li><a href="vimeo.com"></a></li>
<li><a href="wordpress.com"></a></li>
<li><a href="youtube.com"></a></li>
<li><a href="mailto"></a></li>
</ul>
</body>
</html>


Tu testes sur un serveur local ou sur un serveur distant ?
EDIT: arf, je viens de voir que tu mets "font Awesome" dans le font-family. Essaie avec "fontAwesome" sans espace entre "font" et "Awesome".

Amicalement,
Modifié par parsimonhi (23 Jan 2019 - 17:43)
Bonjour Parsimonhi,

Et merci encore pour ton temps et ton aide. Je travaille sur un thème enfant, à l'aide du serveur local MAMP :

https://image.noelshack.com/fichiers/2019/04/4/1548318061-capture-d-ecran-2019-01-24-a-09-29-27.png

Ma version de FontAwesome est bien la 4.3.0, mais elle est srcé / hrefé dans le thème parent d'une façon complètement différente de la tienne. J'ai trouvé ça : 

@font-face {
font-family: 'FontAwesome'; 
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}


Le test marche aussi de mon côté, ça s'affiche sans soucis. Je viens d'essayer d'enlever l'espace entre le "Font" et le "Awesome" mais sans succès, désolée Smiley bawling

Bien à toi,
Modérateur
Bonjour,

Là, tu me montres un extrait du css d'un fichier fontAwesome. Ce fichier, il ne faut surtout pas le modifier. Il faut qu'il soit dans son état d'origine. Si tu y a touché, il faut réinstaller le thème par précaution.

Sinon, je ne suis toujours pas sûr que tu as bien testé ce dont on a besoin pour faire le diagnostic dans le fichier html exemple que j'ai fourni.

1) As-tu bien remplacé dans ce html la ligne 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin="anonymous">

par une ligne où le href pointe vers le fichier fontAwesome qui est dans ton thème Hitchkock ?
2) Si tu travailles avec sur un serveur distant, il faut évidemment tester ce html sur ce serveur distant (là où est installé ton wordpress).

Ceci permet de valider plusieurs :
1) que le serveur trouve bien le fichier fontAwesome
2) que tu t'es pas gourré dans le chemin vers ton fichier fontAwesome
3) que le nom à utiliser pour font-family dans tes css à toi (pas le font-family qui est dans le fichier fontAwesome) est le bon nom
4) que ton fichier fontAwesome contient bien les icônes que tu souhaites afficher.

J'ai téléchargé le thème Hitchkock chez moi. Son fichier fontAwesome marche avec mon html de test.

Tant qu'on n'a pas la validation que tu arrives à faire marcher le html de test avec le fontAwesome du thème Hitckock "dans l'état qu'il a juste après un téléchargement du thème", on ne va pas plus loin.

Amicalement,
Pages :
Sujet clos
Aller à