Changer la taille des icones

mistergraphx commented 6 years ago

Bonjour, Merci pour votre partage !(cf discussion récente sur forum plugin socialtag) J’utilise fort bien socialshare et j’aimerai pouvoir modifier la taille et les couleurs des icônes. Je ne maîtrise pas la technique SVG Sprite icons que vous utilisez. Je me demande à quoi est utile le fichier socialshare.css ? comment le surcharger ? Merci pour votre éclairage Jean-Pierre

mistergraphx commented 6 years ago

Changer la taille des icone est relativement simple si on utilise que le sprite svg :

il suffit comme pour une police d'icone de changer la taille de la police sur le selecteur css de l'icone.

dans une feuille de style personelle

/* Changer la taille des icone svg */
.svg .s-icon {
  font-size: 2rem; /* la taille des icones pour le sprite svg se régle avec la propriété font-size */
}
.s-icon,
.no-svg .s-icon {
  width: 45px; /* pour les images png utilisées en cas de non gestion du svg par le navigateur : on utilise width/height */
  height:45px;
}

Pour changer la couleur des icone :


.svg .s-icon {
  background-color: blue; /* pour changer la couleur de toutes les icones svg */
}
/* Pour changer une icone spécifique */
.s-icon-twitter{
  background-color: blue;
}

on peut aussi ne pas charger les css depuis la config du plugin et gérer les css depuis un theme. C'est ce que je fais le plus souvent.

jpcrea commented 6 years ago

Merci pour cette mise à jour. J'ai créé un fichier socialshare.css dans mon thème dans lequel j'y ai mis les styles ci-dessus. Lorsque je modifie la taille : .s-icon, .no-svg .s-icon { width: 20px; /* pour les images png utilisées en cas de non gestion du svg par le navigateur : on utilise width/height */ height:20px; }

J'obtiens : social

.svg .s-icon { font-size: 3rem; /* la taille des icones pour le sprite svg se régle avec la propriété font-size */ } ne modifie rien. De même pour : .svg .s-icon { background-color: rgb(0,153,255); /* pour changer la couleur de toutes les icones svg */ } /* Pour changer une icone spécifique */ .s-icon-facebook{ background-color: rgb(0,153,255); }

Si vous pouviez m'éclairer.

mistergraphx commented 6 years ago

Désolé pour le temps de réponse, j'ai due introspecter un peut ^^ surtout afin de trouver une solution pratique…

En fait j'utilise/ais toujours une icon font créé sur mesure pour mon thème. Je crée/créais l'icon font sur fontello. Ensuite je change les classes des réseaux sociaux en passant par la pipeline depuis mon theme, pour utiliser les icones de mon icon font. Dans ce cas on peut styler comme une typo. Cela dit j'évolue actuellement vers un autre mode de gestion de ce type de graphiques.

La technique du sprite svg est interressante, mais peut pratique pour pouvoir ensuite styler en css. De plus le support navigateur évoluant, il est de moins en moins interressant de proposer un fallback en png. On peut tricher en utilisant transform: scale(), changer la couleur en jouant sur le background mais pas grand chose de plus, et il faut mettre a jour le png …

J'ai regardé un peut comment pouvoir mieux gérer les personnalisations, en passant par un svg inline. ceci permet de pouvoir completement personaliser ses icones via les propriétées css svg. mais aussi de les animer, etc

La prochaine version du plugin va donc :

proposer plusieures méthodes d'insertion : sprite+fallback, svg inline, voir une icon font avec juste les principaux réseaux, mais je privilegie l'évolution vers le svg inline.
pour gérer le markup des icones qui différe suivant les cas d'utilisation, une balise #SOCIAL_ICON, qui se chargera d'afficher soit <i|span|div> soit <svg>

le svg inline n'est insséré que sur les pages ou les partages sont affichés, juste après la balise <body>

pour les sprites, il sont maintenant générés en automatique et mieux optimisés que les sources dont j'étais parti au départ.

jpcrea commented 6 years ago

Je comprends. C'est plus complexe que ce que je pensais. Je vais laisser dans l'état actuel et attendre la prochaine version du plugin. Merci de l'intérêt que vous avez porté à ma demande. Comment aurais-je l'info de la publication de la prochaine version ?

mistergraphx commented 6 years ago

@jpcrea : je viens donc de publier la version 1.1.0

vous pouvez donc maintenant choisir trois méthodes :

pas d'insertion (utilisation dans un framework embarquant déjà un set d'icone)
utiliser l'icon font qui est fournie (et éditable si besoin chez fontello.com)
utiliser le svg et profiter des animations personalisation (eppaisseur des contours, couleur, …)

pour le moment je n'ai pas mis de polifyll js pour le support svg dans les versions >IE11

je pense que l'intégrateur peut aussi si il y'a besoin l'ajouter dans son thème… mais je pourrais envisager de l'intégrer depuis la config…

merci de vos retours et bonne journée

mistergraphx / spip_socialshare

Changer la taille des icones #1