[Réglé] Peut-on modifier font-awesome.min.css ?

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.1

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !
Partager sur FacebookPartager sur TwitterPartager sur Google+

[Réglé] Peut-on modifier font-awesome.min.css ?

Messagepar Manard » 17 Jan 2017 à 18:51

Bonjour,

En personnalisant mon style , je viens de voir qu'il y a un fichier css qui sous assets/css/font-awesome.min.css

Je voulais modifier l'icône de contact, j'en ai vu un autre qui me semble mieux en visuel : http://fontawesome.io/icon/comments-o/

J'ai modifié le nom dans le fichier "viewtopic_body.html" à la ligne 182, ce nouvel icône est bien pris en compte mais avec une petite taille. Cette taille provient de font-awesome.min.css et est héritée

Code: Tout sélectionner
fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;


Depuis la commande "Examiner l'élément" sous Firefox, si je change "inherit" en 20 px la taille serait correcte

Je pense que si je fais cette modification je vais modifier d'autres tailles.

D'une part peut-on modifier ce fichier, comment et puis-je régler que cet icône ? Quel éditeur utiliser pour bien le visualiser ?, aussi bien sous Notepad que Dreamwever le fichier s'affiche comme une frappe "au kilomètre"

Avec mes remerciements

Bernard
Modifié en dernier par Manard le 17 Jan 2017 à 19:33, modifié 1 fois.
Manard
Roi des posts
Roi des posts
 
Messages: 923
Enregistré le: 31 Mar 2012 à 09:24

Re: Peut-on modifier font-awesome.min.css ?

Messagepar Mazeltof » 17 Jan 2017 à 19:17

'soir ici,

Manard a écrit:J'ai modifié le nom dans le fichier "viewtopic_body.html" à la ligne 182

Tu parles bien de l'icone de contact dans le profil des sujet ? cette ligne :
Code: Tout sélectionner
<i class="icon fa-commenting-o fa-fw icon-lg" aria-hidden="true"></i><span class="sr-only">{postrow.CONTACT_USER}</span>

Si je ne m'abuse, la taille de l'icône est de 16px et est définie par icon-lg dans le fichier prosilver/theme/icons.css.

Mais puisque tu as modifié le fichier viewtopic_body.html tu peux aussi modifier/ajouter une classe qui te permettra de définir une taille spécifique à cette icône uniquement. :wink:

Cela dit, une autre façon de modifier les icônes de Font-Awesome (que j'utilise actuellement sur un style en développement) sans modifier les fichiers originaux, est de créer un style hérité de prosilver en important ta propre police d'icônes :wink:
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2642
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Peut-on modifier font-awesome.min.css ?

Messagepar Manard » 17 Jan 2017 à 19:33

Bonsoir Mazeltof,

Je te remercie de ta réponse, il s'agit bien de la ligne que tu as mise dans la ligne de code

Je viens de fureter sur le net et ai trouvé sur le site de Font Awesome peut-être une solution : http://fontawesome.io/examples/

Je viens de remplacer la ligne par

Code: Tout sélectionner
<i class="fa fa-comments-o fa-2x" aria-hidden="true"></i><span class="sr-only">{postrow.CONTACT_USER}</span>


Image

Avec fa-2x j'ai une taille correcte

Donc je pense qu'il ne faut pas aller tripatouiller ce css, on a des suffixes qui remplacent ces modifications

Edition :

Si quelqu'un apporte cette modification, il y a également la ligne 58 de ucp_pm_viewmessage.html à éditer

Code: Tout sélectionner
<a href="#" class="dropdown-trigger"  title="{CONTACT_USER}"><i class="icon fa-commenting-o fa-fw icon-lg" aria-hidden="true"></i><span class="sr-only">{CONTACT_USER}</span></a>


à remplacer par

Code: Tout sélectionner
<a href="#" class="dropdown-trigger"  title="{CONTACT_USER}"><i class="fa fa-comments-o fa-2x" aria-hidden="true"></i><span class="sr-only">{CONTACT_USER}</span></a>


Bonne soirée

Bernard
Modifié en dernier par Manard le 17 Jan 2017 à 19:52, modifié 2 fois.
Manard
Roi des posts
Roi des posts
 
Messages: 923
Enregistré le: 31 Mar 2012 à 09:24

Re: Peut-on modifier font-awesome.min.css ?

Messagepar cabot » 17 Jan 2017 à 19:47

Manard a écrit:Donc je pense qu'il ne faut pas aller tripatouiller ce css, on a des suffixes qui remplacent ces modifications

Toutafé, Font Awesome est à utiliser comme un framework et il suffit d'utiliser les classes disponibles car la librairie d'icônes est chargée en parallèle avec une feuille de style.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26779
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Peut-on modifier font-awesome.min.css ?

Messagepar Manard » 17 Jan 2017 à 19:55

Bonsoir Cabot,

Je te remercie de ta réponse, si je comprends bien tu valides ma modification avec "fa-2x" dans les fichiers html

Bonne soirée

Bernard
Manard
Roi des posts
Roi des posts
 
Messages: 923
Enregistré le: 31 Mar 2012 à 09:24

Re: Peut-on modifier font-awesome.min.css ?

Messagepar cabot » 17 Jan 2017 à 20:18

Ça dépend :mrgreen:

Si tu as déjà modifié le HTML, sous-entendu que tu n'utilises pas l'héritage, c'est la méthode à retenir. Si ce n'est pas le cas, alors tu peux cibler les icônes dont tu veux augmenter la taille via CSS en redéclarant un font-size. Les deux façons de faire sont correctes mais la deuxième permet de ne pas avoir à modifier le HTML.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26779
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque


Retourner vers [3.1.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 3 invités