Comment puis-je rendre un objet Fa cliquable?

J'ai lu d'autres questions avant et la meilleure réponse que j'ai vu était de l'envelopper dans une étiquette d'ancrage. commeComment puis-je rendre un objet Fa cliquable?

<a href="account.php"><i class="fa fa-user" style="font-size:36px"></i></a>

mais cela ne fonctionne pas. Mon objet fa devient bleu pour qu'il fonctionne comme un objet d'ancrage mais je ne peux pas cliquer dessus.

Je n'arrive pas à comprendre pourquoi cela ne fonctionne pas. Je pensais peut-être quelque chose avec mon code HTML?

Voici mon code:

   <html> 
      <head> 
      <title>'.$title.'</title>   
      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 
      <link href="core/assets/css/main.css" type="text/css" rel="stylesheet"> 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
      </head> 
      <body> 
      <header id="header"> 
       <div class="container"> 
        <h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1> 
       </div> 
        <div class="box" onclick="alert("You clicked me !")"> 
        <i class="fa fa-user" style="font-size:36px"></i> 
        </div> 
      </header> 
      <div class="content"> 
       <div class="article"> 
        '.$content().' 
       <div> 
      </div> 
      </body>  
      </html>

Je veux que le fa-utilisateur d'être cliquable et un lien vers une autre page. J'ai essayé onclick comme vous voyez dans mon code pour vérifier si cela fonctionnait mais cela ne fonctionnera pas non plus.

https://jsfiddle.net/cvvcxbnh/

Source

2017-09-02 Timo Verberne

comment il ne fonctionne pas avec l'ancre, regardez ici https://jsfiddle.ne t/tv0gas4v/ –

Une balise d'ancrage n'est pas cliquable si vous n'ajoutez pas l'attribut href –

@ عارفبنالأزرق déjà essayé mais ne fonctionne pas pour moi. C'est pourquoi j'ai essayé de demander ici. Je pense que mon code HTML bloque pour une raison quelconque. Je vais éditer mon script. pourriez-vous jeter un coup d'oeil? –

Ajouter position par rapport à la boîte div

qui est provoquée par le positionnement absolu du récipient, cependant l'ajout de z-index résout le problème, mais z-index ne fonctionne que sur des éléments positionnés (position: absolu, position: relative ou position: fixed)

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
    background-color: #f6f9fc; 
 
} 
 
#header { 
 
    z-index: 2; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #fff; 
 
    box-shadow: 0px 1px 10px #888888; 
 
} 
 
p { 
 
\t font-family: Arial; 
 
} 
 
#header h1 { 
 
    font-size: 2.4rem; 
 
    color: #3c8be4; 
 
    font-family: sans-serif; 
 
} 
 
header .container { 
 
\t margin: 0 auto; 
 
\t position: absolute; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.content { 
 
    padding-top: 100px; 
 
} 
 
.article { 
 
    margin: 100px 15%; 
 
    position: relative; 
 
    overflow-wrap: break-word; 
 
    animation-duration: 2s; 
 
    animation-name: animation1; 
 
    animation-timing-function: ease; 
 
} 
 
header .box { 
 
    float: right; 
 
    position:relative; 
 
    margin-top: 33px; 
 
    margin-right: 33px; 
 
    color: #4e4e4e; 
 
    text-decoration: none; 
 
    cursor:pointer; 
 
    z-index: 2; 
 
} 
 
.article h1{ 
 
    color: #4e4e4e; 
 
    font-family: Sans-serif; 
 
    font-size: 4rem; 
 
    line-height: 0px; 
 
} 
 
.article p{ 
 
    font-size: 1.5rem; 
 
    color: #535353; 
 
    display: inline-block; 
 
} 
 
.login h1{ 
 
\t font-size: 2rem; 
 
} 
 
.login { 
 
\t float: right; 
 
    box-shadow: 0px 1px 10px #888888; 
 
\t width: 300px; 
 
\t position: relative; 
 
\t border-radius: 15px; 
 
\t padding: 20px; 
 
\t display: inline-block; 
 
\t text-align: center; 
 
\t background-color: #fff; 
 
} 
 
.inlogform { 
 
    margin-top: 40px; 
 
} \t 
 
.login h3,h4 { 
 
    font-family: sans-serif; 
 
    font-size: 0.8rem; 
 
    line-height: 0; 
 
    margin-bottom: 5px; 
 
    text-decoration: none; 
 
} 
 
.login h4{ 
 
    margin-top: 30px; 
 
    color: red; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 
input[type=text] { 
 
    width: 90%; 
 
    margin: 5px 0; 
 
    padding: 8px; 
 
    border: 1px solid gray; 
 
    border-radius: 10px; 
 
    font-size: 1rem; 
 
    margin-top: 0; 
 
} 
 
input[type=password] { 
 
    width: 90%; 
 
    margin: 5px 0; 
 
    padding: 8px; 
 
    border: 1px solid gray; 
 
    border-radius: 10px; 
 
    font-size: 1rem; 
 
} 
 
input[type=submit] { 
 
    width: 90%; 
 
    margin: 20px; 
 
    padding: 8px; 
 
    border: 0px solid gray; 
 
    border-radius: 10px; 
 
    font-size: 1rem; 
 
    background-color: 3c8be4; 
 
    color: white; 
 
    margin-bottom: 5px; 
 
} 
 
@media (min-width: 600px) { 
 
@keyframes animation1 { 
 
    0% {margin:0px 15%;opacity: 0;} 
 
    100% {margin: 100px 15%; opacity: 1;} 
 
} \t 
 
} 
 

 
/*Mobiele Weergave*/ 
 
@media (max-width: 599px) { 
 
    #header .container { 
 
    width: 100%; 
 
    } 
 
    #header { 
 
\t height: 80px; 
 
    } 
 
    #header h1 { 
 
\t font-size: 30px; 
 
\t float: left; 
 
\t margin-left: 5%; 
 
    } 
 
    .content { 
 
    padding-top: 80px; 
 
} 
 
.article{ 
 
    margin: 60px 5%; 
 
} 
 
.register { 
 
     margin-left: 5%; 
 
} 
 
#header .box { 
 
    margin-top: 22px; 
 
    margin-right: 22px; 
 
} 
 
.login { 
 
\t float:left; 
 
} 
 
@keyframes animation1 { 
 
    0% {margin:0px 5%;opacity: 0;} 
 
    100% {margin: 60px 5%; opacity: 1;} 
 
} 
 
} 
 

 

 
\t \t \t

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
      <header id="header"> 
 
       <div class="container"> 
 
        <h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1> 
 
       </div> 
 
        <div class="box" > 
 
        <a href="#"> <i class="fa fa-user" style="font-size:36px"></i></a> 
 
        </div> 
 
      </header> 
 
      
 
      <div class="content"> 
 
       <div class="article"> 
 
        '.$content().' 
 
       <div> 
 
      </div>

Source

2017-09-02 09:01:11

Ici, vous devez ajouter de la valeur "href" à l'intérieur "d'une" étiquette. Et pour ouvrir une autre page, utilisez target = "_ blank" dans "a" tag.Hope ça va marcher.

<div class="container"> 
     <h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1> 
    </div> 
    <div class="box"> 
     <a href="#" target="_blank"><i class="fa fa-user" style="font-size:36px; 
    color:black;"></i></a> 
    </div>

Source

2017-09-02 08:53:04

Ne fonctionne pas :-( –

".header container" postion est le problème –

Que voulez-vous dire par conteneur en-tête? –

Comment puis-je rendre un objet Fa cliquable?

Répondre

Questions connexes