Ajout d'une image et de texte à la fois dans asp.net bouton

Je suis à la recherche d'une solution où je serai en mesure d'ajouter une image et du texte dans les deux asp.net bouton.

 <asp:Button ID="Button1" runat="server" Text="Button"/>

Je suis seulement en mesure de spécifier le texte du bouton, mais comment puis-je ajouter une image en tant que bien à elle?

vous devriez être en utilisant msdn.microsoft.com/en-us/library/...
Puis-je spécifier le texte et l'image les deux ensemble dans le bouton Image?
Oui, bien sûr. msdn.microsoft.com/en-us/library/...
Le texte n'est pas visible, seule l'image est visible dans le bouton.
Essayez de vérifier cette question stackoverflow.com/questions/262141/...

OriginalL'auteur Arry | 2013-07-28

  1. 24

    Par défaut, ASP .Net n'a pas un bouton qui peut rendent à la fois l'image et le texte en même temps. Cependant, vous pouvez obtenir de deux façons.

    À l'aide de CSS

    Je préfère CSS, car il est léger, et vous pouvez choisir ce que vous voulez.

    Ajout d'une image et de texte à la fois dans asp.net bouton

    <style type="text/css">
    .submit {
        border: 1px solid #563d7c;
        border-radius: 5px;
        color: white;
        padding: 5px 10px 5px 25px;
        background: url(https://i.stack.imgur.com/jDCI4.png) 
            left 3px top 5px no-repeat #563d7c;
    }
</style>

<asp:Button runat="server" ID="Button1" Text="Submit" CssClass="submit" />

    Tiers De Contrôle

    Il fonctionne hors de la boîte. Cependant, vous ne pouvez pas changer leur style facilement.

    Ajout d'une image et de texte à la fois dans asp.net bouton

    Utilisation par des tiers comme Telerik RadButton.

    Dernière mais pas moins, si vous le souhaitez, vous pouvez mettre en œuvre un contrôle serveur personnalisé par vous-même.

    merci beaucoup! Au moins, nous avons un certain contrôle sur .net :/ N'aime pas l'aide de Telerik:)
    cette fonction est utile. Mais vous devez aussi ajouter des supplémentaires de la propriété background-repeat:repeat-y; pour rendre une image à gauche et de ne pas répéter

    OriginalL'auteur Win

  2. 0

    Vous pouvez également utiliser une icône de police au lieu d'une image.

    CSS

    .button {
min-width:175px;
border-radius:50px;
background:none;
outline:none;
border:none;
color:#fff;
padding:15px 25px;
margin-top:10px;
background: rgba(115,84,178,1);
background: -moz-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(115,84,178,1)), color-stop(34%, rgba(115,84,178,0.95)), color-stop(35%, rgba(115,84,178,0.95)), color-stop(62%, rgba(96,107,192,0.91)), color-stop(100%, rgba(84,160,231,0.85)));
background: -webkit-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -o-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -ms-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7354b2', endColorstr='#54a0e7', GradientType=1 );
}

    Vous pouvez supprimer le background et filter partie de la classe button dans le style précédent. J'ai juste utilisé pour le dégradé de fond pour le bouton.

    HTML

    <button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
<i class="fa fa-download" style="font-size:20px;float:left;"></i> DOWNLOAD
</button>

    Aspect du bouton ci-dessous.

    Ajout d'une image et de texte à la fois dans asp.net bouton

    Violon démo ici

    Et même vous pouvez changer la couleur de l'icône juste en ajoutant de la couleur à la <i>...</i>. Quelque chose comme ci-dessous.

    <button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
<i class="fa fa-download" style="font-size:20px;float:left;color:#ff4444;"></i> 
DOWNLOAD
</button>

    OriginalL'auteur Ullas