Comment colorer le texte à l'intérieur de l'icône

Je voulais savoir si je pouvais ajouter de la couleur à l'icône que je lierais en bas si je la survolais?Comment colorer le texte à l'intérieur de l'icône

https://www.google.ch/search?q=linkedin&source=lnms&tbm=isch&sa=X&ved=0ahUKEwilrciPwpPVAhUEWhQKHYX7CxcQ_AUICigB&biw=1920&bih=949#tbm=isch&q=linkedin+black+icon&imgrc=eCztS3qV_QYT9M

Par exemple, comment puis-je faire la couleur que du texte « dans » rouge si je passe la souris dessus? Je pense que vous devez le faire en combinaison avec un éditeur de photos, mais je ne sais pas vraiment comment. Merci pour votre aide

Ceci est mon code que j'ai essayé.

<section id="icons"> 
    <a href="#"><img src="youtube.png" class="youtube" alt=""></a> 
</section> 


.youtube { 
background-image: url(youtube.png); 
width: 5vw; 
position: absolute; 
} 

.youtube:hover { 
background-image: url(youtubehover.png); 
width: 5vw; 
position: absolute; 
}

Source

2017-07-18 lologic

s'il vous plaît partager un peu de code que vous avez essayé – tech2017

Le problème avec le code que vous avez essayé ici, était que "youtubehover.png" n'était pas importé de quelque part. Vous avez seulement importé "youtube.png". Vous auriez besoin d'une image séparée importée appelée youtubehover.png qui avait les différentes couleurs que vous vouliez. Sinon, je croyais que cela aurait fonctionné. Je suis content que vous ayez tout compris maintenant. – Alec

je devais faire le texte dans l'icône vierge à l'aide de baguette magique avec paint.net. J'ai également supprimé la couleur blanche des bords.Avec le code suivant j'ai changé la couleur du texte ou le contenu intérieur de l'icône du blanc au rouge quand je survolez

<section id="icons"> 
    <a href="#"><img src="yourimage.png" alt=""></a> 
</section> 


#icons img { 
    width: 5vw; 
    padding: 0; 
} 

#icons img:hover { 
    background-color: red; 
    border-radius: 100%; 
    overflow: hidden; 
}

Source

2017-07-19 06:17:02 lologic

La meilleure façon de procéder est de créer deux images séparées. Un pour quand l'icône est dans son état par défaut, et l'autre pour quand il est dans son état stationnaire. Dans l'état hover, changez la couleur à ce que vous voulez, dans votre cas en rouge, de sorte que lorsque l'utilisateur passe sa souris dessus, ils voient cette couleur.

Voici un exemple de code CSS pour le faire:

#icon { 
background-image: url(../images/example_default.png) 
width: 150px; 
height: 150px; 
position: absolute; 
} 

#icon: hover { 
background-image: url(../images/example_hover.png) 
width: 150px; 
height: 150px; 
position: absolute; 
cursor: pointer; 
}

: hover changements que l'image ressemblera lorsque l'utilisateur passe au-dessus de l'icône. Notez que les images d'arrière-plan sont différentes, une pour chaque état de l'icône. J'ai également ajouté "cursor: pointer" en supposant que cette icône sera un bouton quelconque.

Source

2017-07-18 19:14:42 Alec

utilisé le code que vous m'avez dit, mais pour une raison quelconque, cela ne fonctionne pas. Je ne vois tout simplement pas le changement et l'autre image en couleur. Ne dois-je pas utiliser z-index, car si j'applique une image de fond à une autre image de fond, elle est derrière l'ancienne. – lologic

@lologic no: hover devrait prendre soin de tout cela. Essayez de supprimer l'espace entre le vol stationnaire et le côlon. Mis à jour mon code, j'ai raté quelques semi-colons. – Alec

J'ai trouvé une solution et j'ai écrit une réponse. Je devais juste utiliser un autre programme. Merci pour l'aide – lologic

Comme l'image est en noir et blanc, vous pouvez l'utiliser.

.red:hover { 
 
    filter: contrast(50%) sepia(100%) saturate(100) hue-rotate(-10deg); 
 
}

<img class="red" src="http://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png">

Source

2017-07-18 19:19:13 Nicholas

Voici un exemple rapide: https://jsfiddle.net/oowjwLru/

Cela peut être facilement accomplir en plaçant une div couleur derrière l'image, puis en utilisant la jQuery simple suivante pour masquer automatiquement la div et montrez-le quand la souris est terminée:

Html:

<img id="imgLogo" src="http://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png" alt="icon" height="100" width="100" style="position:absolute:top:-100px;"> 
<div id="divColor" style="background-color:red;width:60px;height:60px;position:absolute;left:30px;top:28px;z-index:-1;"> 
</div>

Javascript/jQuery:

$(document).ready(function(){ 
    $("#divColor").hide(); 
    $("#imgLogo").mouseover(function() { 
     $("#divColor").show(); 
    }); 
});

Source

2017-07-18 19:30:28

Vous pouvez utiliser un svg (aucun problème avec le redimensionnement) et changer la couleur de remplissage à vol stationnaire

Html:

<svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g> 
    <path d="M30.071,27.101v-0.077c-0.016,0.026-0.033,0.052-0.05,0.077H30.071z"/> 
    <path id="linkedin" fill="#000" d="M49.265,4.667H7.145c-2.016,0-3.651,1.596-3.651,3.563v42.613c0,1.966,1.635,3.562,3.651,3.562h42.12 c2.019,0,3.654-1.597,3.654-3.562V8.23C52.919,6.262,51.283,4.667,49.265,4.667z M18.475,46.304h-7.465V23.845h7.465V46.304z M14.743,20.777h-0.05c-2.504,0-4.124-1.725-4.124-3.88c0-2.203,1.67-3.88,4.223-3.88c2.554,0,4.125,1.677,4.175,3.88 C18.967,19.052,17.345,20.777,14.743,20.777z M45.394,46.304h-7.465V34.286c0-3.018-1.08-5.078-3.781-5.078 c-2.062,0-3.29,1.389-3.831,2.731c-0.197,0.479-0.245,1.149-0.245,1.821v12.543h-7.465c0,0,0.098-20.354,0-22.459h7.465v3.179 c0.992-1.53,2.766-3.709,6.729-3.709c4.911,0,8.594,3.211,8.594,10.11V46.304z"/> 
    </g> 
</svg>

Css:

svg:hover #linkedin { 
    fill: red; //or #ff0000 
}

Dans le svg le chemin doit avoir l'id « linkedin » pour changer la couleur

<path id="linkedin" fill="#000" d="M49.265,[...],10.11V46.304z"/>

Source

2017-07-18 19:58:17

Comment colorer le texte à l'intérieur de l'icône

Répondre

Questions connexes