Comments (5)
mistergraphx
commented on July 19, 2024
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.
from spip_socialshare.
jpcrea
commented on July 19, 2024
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 :
.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.
from spip_socialshare.
mistergraphx
commented on July 19, 2024
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.
from spip_socialshare.
jpcrea
commented on July 19, 2024
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 ?
from spip_socialshare.
mistergraphx
commented on July 19, 2024
@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
from spip_socialshare.
Related Issues (2)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from spip_socialshare.