Caractère unicode sur un bouton : couleurs malgré moi

**StringBuilder** · 30/03/2018, 16h31

Bonjour,

Je suis en train de m'arracher les cheveux depuis plusieurs heures sur un détail qui me rend fou..

Je suis entrain de travailler sur un site. Je ne veux pas utiliser d'images (enfin, le moins possible) pour mes menus et boutons, et j'ai donc décidé de prendre FontAwesome pour mes menus et autres éléments graphiques.

J'ai implémenté FontAwesome sous forme JS. Il y avait plusieurs méthodes et ça m'a eu l'air d'être la plus souple (mais plus ça va, plus je me demande si je vais pas bazarder ce machin).
J'ai donc dans ma page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script type="text/javascript" defer src="static/fontawesome/fontawesome-all.js"></script>

Dans un menu, par exemple, voici le code que j'utilise pour mettre des icônes : (et ça marche)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
        <li class="left"><a href="~/Default.aspx" title="Accueil" runat="server"><span class="fa fa-home"></span>Accueil</a></li>
        <li class="left"><a href="~/DashBoard.aspx" title="Tableau de bord" runat="server"><span class="fa fa-tachometer-alt"></span>Tableau de bord</a></li>

Et là, je souhaite, sur un bouton (un vrai bouton, tout ce qu'il y a de plus standard, avec une tronche de bouton standard) mettre une image "horloge".

Le picto que je tente d'utiliser : https://fontawesome.com/icons/clock?style=regular

J'ai donc intégré le bout de code dans mon bouton :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<button type="button" onclick="SetDateTimeToNow();"><i class="far fa-clock"></i></button>

Et là c'est le drame : pas moyen de faire fonctionner le bignou.

Je fini par me faire une raison (et je commence à me demander si FontAwesome n'est pas une bonne grosse daube plus emmerdante qu'autre-chose).
Je me dis "bon, c'est pas grave, dans la table Unicode il y a un picto clock aussi : 🕓"...

Je pars donc sur cette solution.
Le caractère : https://unicode-table.com/fr/1F553/

Mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<button type="button" onclick="SetDateTimeToNow();" class="unicode">🕓</button>

Et ma classe ".unicode" :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.unicode
{
    color: black;
    font-family: "Arial Unicode MS";
}

Je peut mettre n'importe quelle font et n'importe quelle couleur, j'ai systématiquement une horloge en couleur.
Peut importe le navigateur (je développe avec Microsoft Edge et Mozilla Firefox comme targets).

Bref : comment je fais ?

**mathieu** · 30/03/2018, 20h19

si vous utilisez la version SVG de fontawesome, vous devez cibler l'élément "svg" au lieu de "i".
regardez cet exemple :
https://codepen.io/anon/pen/yKKxzE

**StringBuilder** · 30/03/2018, 21h47

Au détail près que chez moi ça affichait même pas l'horloge :/

Mais bon, j'ai tout viré FontAwesome.
A la base, je l'avais installé uniquement à cause de mon problème de couleur : à savoir que mes caractères Unicode s'affichent systématiquement sous forme d'icônes colorée.

Ca doit bien être possible de les avoir en noir, puisque je les récupère en faisant un copier/coller du caractère à partir du site https://unicode-table.com/fr/ qui sait les afficher en noir...
Seulement ils utilisent un "font-familly: u2400;" et j'ai aucune idée de ce que c'est que cette font-familly.

Je viens de trouver une astuce-usine-à-gaz qui marche pour les icônes dans des menus par exemple, mais qui marche pas pour des boutons...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
.icon_white
{
    position: relative;
    top: -2000px;
    left: -2000px;
    text-shadow: 2000px 2000px 0 white;
}
 
 
<div id="topmenu">
    <ul>
        <li class="left"><a href="~/Default.aspx" title="Accueil" runat="server"><span class="icon_white">🏠</span> Accueil</a></li>
        <li class="left"><a href="~/DashBoard.aspx" title="Tableau de bord" runat="server"><span class="icon_white">📶</span> Tableau de bord</a></li>
        <li class="left"><a href="~/MyTickets.aspx" title="Mes tickets" runat="server"><span class="icon_white">📃</span> Mes tickets</a></li>
        <li class="left"><a href="~/Connection/ChangePassword.aspx" title="Changer de mot de passe" runat="server"><span class="icon_white">🔐</span> Changer le mot de passe</a></li>
        <li class="left"><a href="~/Connection/Logout.aspx" title="Se déconnecter" runat="server"><span class="icon_white">🔒</span> Déconnexion</a></li>
        <li class="right"><a href="~/Connection/Profile.aspx" title="Accès à mon profil" runat="server"><asp:Literal runat="server" ID="LitRespName" /></a></li>
    </ul>
</div>

Je sais c'est très laid...

Pis ça résout pas franchement mon problème

**StringBuilder** · 30/03/2018, 21h54

Eureka !

J'ai fini par trouver. Sur le site unicode-table.com ils utilisent la font "Segoe UI Symbol".

Je l'ai collée dans ma CSS et maintenant mes symboles Unicode sont bien de la couleur de mon texte !

Champagne !

**psychadelic** · 30/03/2018, 23h47

https://fonts.google.com/?query=Segoe%C2%AE+UI+Symbol

c'est tout de même une font à 55€...
pour juste quelques boutons, c'est... spécial..

**StringBuilder** · 31/03/2018, 09h16

55 €... Pourtant elle est sur mon PC sur lequel je n'ai aucun logiciel piraté et où je n'ai rien acheté d'autre que Windows...

Et vu qu'elle est utilisée en standard par le site https://unicode-table.com/fr/ qui est à priori un site tout ce qu'il y a de plus standard et grand public... Ca me surprendrait qu'elle ne soit pas distribué avec la majorité des systèmes.

**psychadelic** · 31/03/2018, 12h34

Je suis sous Linux, et j'ai aussi été vérifier sur un mac récent, aucun de ces 2 systèmes ne dispose de cette police.

Ton lien sur la table unicode ne vaut pas pour preuve, le système Unicode ne sert pas à fixer le graphème des caractères mais à normaliser l' affectation de leur code.
Suivant la police utilisée, le graphème peut varier, ou même être absent.

Invité · 31/03/2018, 13h55

Bonjour,

1- Font Awesome : ATTENTION à la VERSION !

class="fa fa-home" : version 4
class="far fa-clock" : version 5

La nouvelle version (v5) a subi de nombreuses modifications, souvent incompatibles avec la v4.

Perso, j'ai opté pour le CSS :

https://fontawesome.com/get-started/web-fonts-with-css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

La version en JS ajoute du code pour obtenir des icones SVG (incompatible avec le CSS que j'utilise pour styler et surtout positionner mes icones).

2- Polices installées sur les Windows / Mac
Ce n'est pas parce qu'elles sont installées "d'usine" qu'elle sont gratuites (au téléchargement) !
Elles font généralement partie d'un accord commercial.

**StringBuilder** · 31/03/2018, 14h44

J'ai en effet vérifié sur mon téléphone sous Android et la police n'est pas reconnue : j'ai de nouveau les icônes de couleur.
Ballo, car avec mon téléphone sous Windows 10 ça marche bien...

Conclusion, cette font à 55 € est fournie avec Windows 10 (ou Word, puisque j'ai Word aussi sur mon téléphone).

Pour FontAwesome, j'ai utilisé la dernière version d'il y a 1 ou 2 mois.
A moins qu'une nouvelle version ne soit sortie, je pensais donc avoir déjà la dernière.

Dans tous les cas, je trouve dommage d'utiliser un Framework "inutile et payant*" alors que les font standard prennent déjà en charge tous les symboles dont j'ai besoin gratuitement... au détail près que je n'arrive pas à les afficher en monochrome sur toutes les plateformes

* FontAwesome dispose d'une version gratuite grandement bridée (environ 1/3 des symboles sont gratuits et la plupart du temps sans aucune déclinaison supplémentaire)

**psychadelic** · 31/03/2018, 14h59

c'est juste une pendule,
soit tu place une image en base64 sur ta page,
soit tu la dessine en svg, ou il doit bien y avoir milles dessins de pendules en svg pour l'insérer dans ta page, le svg est reconnu maintenant sur tous les systèmes ou au pire tu la place dans ta propre fonte que tu te fabrique, mais en respectant de préférence la codification utf8, mais c'est pas très important.

Invité · 31/03/2018, 15h10

...(et je commence à me demander si FontAwesome n'est pas une bonne grosse daube plus emmerdante qu'autre-chose)...

C'est généralement ce qu'on dit quand on ne sait pas utiliser quelque chose...

Ca évite de se remettre en cause.

Cela dit, l'utiliser uniquement pour une seule icône serait... ridicule.

**StringBuilder** · 31/03/2018, 15h17

Bon, ça me dépasse...

Dans Visual Studio c'est "Segoe UI Emoji" qui est utilisée. Et celle là, elle s'affiche en couleur alors que dans mon code ça s'affiche bien dans la couleur du code.

Mieux : je colle mon code dans Word, j'enregistre au format HTML depuis Word.

Je rouvre le fichier, c'est bien affiché en noir.
Mais si j'ouvre le fichier HTML avec Edge ou Firefox, c'est en couleur...

Et partout dans Windows j'ai du noir et blanc : si je nomme un fichier avec ces caractères Unicode, j'ai pas de soucis de couleurs...

Mais mise à part Segoe UI Symbol, toutes sont en couleur :

http://plannis.manga-torii.com/Test.aspx

Captures d'écran de différents endroits dans Word ou Windows où ces mêmes caractères sont bien en noir et blanc :

Nom : unicode.png
Affichages : 719
Taille : 25,4 Ko

Nom : unicode.png
Affichages : 719
Taille : 25,4 Ko

**psychadelic** · 31/03/2018, 15h44

tiens, mais fais comme tu voudras.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  <button>
    <svg id="clock" viewBox="0 0 100 100" width="30" height="30">
      <circle cx="50" cy="50" r="45" stroke="#6495ed" stroke-width="2" fill="#dfed64" />
      <line x1="50" y1="50" x2="70" y2="40" stroke="#ed64db" stroke-width="8" />
      <line x1="50" y1="50" x2="30" y2="20" stroke="#6472ed" stroke-width="5" />
    </svg>
  </button>

un cercle avec 2 traits, c'est pas la mer à boire, et si tu as besoin de le dupliquer, fais en un motif svg

**thelvin** · 31/03/2018, 16h15

Sinon pour info, Unicode a défini avec son système d'émojis, le fait de pouvoir les afficher en noir et blanc si on préfère. Sous Windows, le moteur de typing en conclut qu'il faut prendre les glyphes dans la fonte Segoe UI Symbol au lieu de Segoe UI Emoji. D'autres systèmes implémentent ça comme ça leur convient.

Voici le code HTML pour ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

🕓&#xFE0E;

Le caractère émoji, suivi du caractère de contrôle U+FE0E "Variation Selector 15" qui semble dire, dans le contexte d'émojis, de les afficher sous forme texte au lieu d'émojis. (A l'inverse il y en a un autre pour afficher les caractères sous forme d'émoji au lieu de texte, mais ça ne semble pas très géré.)

Ou alors, juste copier/coller [🕓︎] et enlever les [ et ] après.

**psychadelic** · 31/03/2018, 17h21

un exemple plus complet
CODE html+css+svg

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Analog Clock</title>
  <style>
    #svgDefs {
      display: none;
    }
 
    button > svg {
      margin: 0; border: 0; padding: 0;
      width:20px;
      height:20px;
    }
  </style>
</head>
 
<body>
 
  <svg id="svgDefs">
    <symbol id="Pendule" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="45"  stroke="#6495ed" stroke-width="2" fill="#dfed64"  />
      <line x1="50" y1="50" x2="70" y2="40" stroke="#ed64db" stroke-width="8" />
      <line x1="50" y1="50" x2="30" y2="20" stroke="#6472ed" stroke-width="5" />
    </symbol>
  </svg>
 
  <button>
    <svg><use xlink:href="#Pendule" /></svg>
  </button>
 
  <button>
    <svg><use xlink:href="#Pendule" /></svg>
  </button>
 
</body>
</html>

**StringBuilder** · 31/03/2018, 22h13

Envoyé par thelvin

Voici le code HTML pour ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

🕓&#xFE0E;

Merci, ça fait exactement ce que je cherchais à faire !

**StringBuilder** · 01/04/2018, 18h58

Hmmm... Enfin presque

Android et Windows 10 phone ne comprennent pas l'astuce

Je sais pas ce que ça donne sous Mac et Linux.

Mais du moment que c'est prévu par la norme Unicode, je vais partir du principe que "c'est comme ça et puis c'est tout".

De toute façon c'est pas un drame, au pire ça fait arlequin

**StringBuilder** · 03/04/2018, 20h40

Bon, finalement j'ai trouvé une autre solution qui fonctionne pas plus mal.

Plutôt que de substituer le caractère par un autre en utilisant un caractère de contrôle Unicode, j'ai procédé à un retour au sources : à savoir, transformer l'icône en couleur en une icône en noir et blanc.

J'ai donc fait comme ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.icon
{
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

L'avantage, c'est que l'icône reste la version "élaborée" et non stylisée en deux couleurs comme c'était le cas.
Aussi, le support sur les différentes plateformes semble plus étendu : autant sur Edge sous Windows Phone 10 ça ne marche toujours pas, autant avec Chrome sous Android par exemple ça marche maintenant.

J'imagine que sur Mac avec Opera ça va marcher. Avec Firefox ça marche aussi, donc à priori sous Linux ça devrait passer sous ce navigateur.

**psychadelic** · 04/04/2018, 00h19

Envoyé par StringBuilder

donc à priori sous Linux ça devrait passer sous ce navigateur.

Je confirme.

ma solution svg ne te plais pas ?

(tu l'a carrément snobée, alors qu'elle te permet de mettre les couleurs qui te plaisent, ainsi que le positionnement des aiguilles selon ton gout, voir même de les déplacer dynamiquement... )

**StringBuilder** · 04/04/2018, 09h14

Envoyé par psychadelic

ma solution svg ne te plais pas ?

(tu l'a carrément snobée, alors qu'elle te permet de mettre les couleurs qui te plaisent, ainsi que le positionnement des aiguilles selon ton gout, voir même de les déplacer dynamiquement... )

J'avoue en effet que je l'ai écartée d'office.

En effet, à l'image de cette page :
http://plannis.manga-torii.com/Test.aspx

Je n'utilise pas qu'une seule icône, mais plusieurs (et je vais certainement en utiliser d'autres).

Et j'ai pas trop envie de les redessiner toutes

Caractère unicode sur un bouton : couleurs malgré moi [CSS 3]

CSS

Discussions similaires

Partager

Partager