Bonjour,
 
voici le code d'une icône. Il n'active pas le texte auquel il est associé.
 
 <i class='icon icon-off'><a href="logout.php"></i>
      <span class='label label-bottom'>Fin session</span></a>
    </li>
 
la sortie de la session de travail se fait correctement mais la souris sur l'icône faillit à activer le texte.  
Puis-je savoir pour quelle raison seule l'icône s'active en effet lumineux ..?
 
Merci

il faut imbriquer tes éléments correctement

<li>
  <a href="logout.php">
      <i class='icon icon-off'></i>
      <span class='label label-bottom'>Fin session</span>
  </a>
</li>

tu peux remplacer le
<i class='icon icon-off'></i>
par
<i class='icon icon-off' />

1.  <li class='btn'>
2.      <i class='icon icon-off'/><a href="logout.php">
3.      <span class='label label-bottom'>Fin session</span></a>  
4.  </li>  
 
 
 
Merci, effectivement cela réagit. Toutefois l'icon est deux fois plus grande que l'initiale. De plus, l'icône s'est déboulée pour se coller à l"xtémité gauche et droite.  
Un problème de CSS ?? Les autres ne sont pas affectées, uniquement l'icône de fin de session suite à l'imbrication de la page du PHP.

oui c'est du css. Tu as probablement des règes CSS sur li / li a / a  i  
 
 
 Pour le HTML il faut bien se rappeller que les balises s'imbriquent toujours, il ne faut jamais ouvrir une balise 1 , ouvrir une balise 2, fermer la balise 1, fermer la balise 2  
Dans ce cas, le navigateur applique des règles pour décider de fermer la balise 1 en avance puis d'ignorer sa fermeture ensuite

l'imbrication n'apparait pas comme dysfonctionnel. La balise </i> se verrouille juste après son code d'ouverture.
 
<i class='icon icon-off'/> signifie à la fois <i> et </i>
 
il est étrange d'avoir l'apparition de duplicata d'icônes.
 
n'y a-t-il pas une alternative pour faire appel à des liens php sans la duplication de ces icônes ??

https://zupimages.net/up/21/27/2wnx.png
 
https://zupimages.net/up/21/27/xzw0.png
 
cela serait plus parlant

Je ne vois pas l'intérêt de la balise <i> surtout mise en <i/> <i>, <u>, <b>, <font> n'ont plus lieu d'être avec le css.
 
Sinon, +1 pour bien faire attention à l'imbrication des balises html. Faut les voir comme des boîtes.

rufo@ les balises mentionnées sont dans le html, mais surtout pas dans le css.
Il a été évoqué que le css était problématique. Toutefois le code fonctionne dans ses frontières css, c'est le logout.php qui déstabilise cela.
Je me demande si une autre alternative ne serait pas la bienvenue? Existe-t-elle cette autre alternative ?

Evidemment que les balises sont dans le html et pas dans le css    
Je voulais dire que les <i>, <u>, <b>, <font> n'ont plus lieu d'être employées dans du HTML parce qu'elles ont un équivalent en CSS
Pour rappel, les balises HTML ont pour vocation à structure un document (des infos) et pas faire de la mise en forme. Cette dernière est réalisée par le CSS justement. En bref, le HTML c'est pour le fond, le CSS est pour la forme.
ex : une info importante sera dans une balise <strong> et pas <b>. Même si visuellement, les navigateurs font le même rendu, d'un point de vue sémantique, <strong> et <b> sont différentes. Pareil pour <em> et <i>.

C'est l'usage d'employer le tag I pour les fonts icon.
https://fontawesome.com/v4.7/examples/
 
Bon par contre il est recommandé d'employer plutôt du SVG inline.
 
Sinon la solution de Flo850 est bonne.
Tu dois mettre l'icône dans le lien pour pouvoir cliquer dessus

C'est pas parce qu'une lib fait de la daube qu'il faut le faire aussi
On met du HTML pour structurer de l'info pas pour aider à la mise en forme. Dis en clair, rajouter du HTML juste pour permettre une mise en forme n'est pas correct.
 
Maintenant, y'a pleins de solutions. Mettre l'icône soit dans une <img /> (qui peut être à l'intérieur d'un <a> ), soit dans le css (via background-image) associé à un <span> qui sert à encapsuler du contenu ou un <a>, ... bref, y'a pas mal de solutions.
 
Edit : un très bon bouquin pour bien comprendre comment on crée sa page HTML puis CSS (puis Javascript) : https://www.amazon.fr/CSS3-Pratique [...] 212678967/  
 
Edit 2 : en respectant d'utiliser les balises html pour leur sémantique et pas leur rendu graphique, ça va aussi aider nos amis malvoyants en rendant vos sites web accessibles (cf le A, AA et AAA).  

Il me semble que ton code n'est pas le même que celui proposé par Flo850

 
Et plutôt qu'envoyer une image, du code avec serait bien.
Par exemple
 

je ne comprends pas pourquoi j'ai une icône de fin de session à gauche alors qu'elle est déjà sur la droite telle qu'elle est attendue

 
 
Pour la sémantique, l'exemple dans le lien indique bien l'usage de aria-hidden="true"

Personne ne peut t'aider sans voir le code HTML et CSS

html  
 
1.  <li class='btn'>
2.       <i class='icon icon-off'><a href="logout.php"></i>  
3.       <span class='label label-bottom'>Fin session</span></a>
4.  </li>
 
1. <li class='bin'> rem : Cela pose l'icons dans la barre du menu horizontale.
 
2. <i class='icon icon-off'><a href="logout.php"></I> rem: cela présente l'icône de la fin de session, avec le lien de sortie.
 
3. <span class='label label-bottom'>Fin session</span></a> rem : cela définit le nom de l'icône et applique sur les effets css sur la nomination.
 
4. </li> fermeture de la boite.
 
 
CSS:
1.     .statusbuttons .btn.inbox {
2.       width: 80px;
3.     }
4.
5.     .statusbuttons .btn span.label {
6.       line-height: 64px;
7.     }
8.
9.     .btn span.label.pull-left {
10.    display: block;
11.    margin: 0 5px 0 20px;
12.    }
13
14.    .statusbuttons .btn .icon-horizontal {
15.     text-align: left;
16.     margin-left: 5px;
17.     }
18.
19.     .btn .icon {
20.      text-align: center;
21.      display: block;
22.       line-height: 62px;
23.       color: #FFBF80;
24.       font-size: 24px;
25.       margin: 0 5px 0 5px;
26.       }
27.     .statusbuttons li.btn .label-bottom {
28.       display: block;
29.       position: relative;
30.       color: #FFA467;
31.       font-size: 12px;
32.       top: -42px;
33.       margin: 0 5px 0 5px;
34.       text-align: center;
35.       }
 

Ton HTML n'est pas bon, tu dois enployer celui de Flo850

1.   <li class='btn'>
2.        <i class='icon icon-off'></i>
3.         <span class='label label-bottom'><a href="logout.php">Fin     session</span></a>  
4.   </li>
 
voilà .. avec ceci tout fonctionne.  
Mais il reste un problème : le lien est de couleur bleue. Comment supprimer cette couleur ?

 
 
Non, ce code réagit mal, la souris ne déclenche pas la réactivité de couleur blanche lumineuse

ce qui est normal vu que tu force pas mal de chose dans
 .statusbuttons li.btn .label-bottom

Ajoute :

.statusbuttons li.btn .label-bottom:hover{
     color:pink;
}

(et imbrique tes balises comme il faut, c'est vraiment important)