8

asp.netボタンに画像とテキストの両方を追加できるソリューションを探しています。

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

ボタンにテキストしか指定できませんが、画像も追加するにはどうすればよいですか?

4

4 に答える 4

3

ここに私のために働く簡単な解決策があります：

 <asp:LinkButton runat="server" ID="btnRun" Text="<i class='fa fa-home'></i> Search"
                                    CssClass="btn-success" />
于 2019-07-31T12:35:19.150 に答える
1

画像の代わりにフォント アイコンを使用することもできます。

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 );
}

上記のスタイルで、クラスのbackgroundand部分を削除できます。ボタンのグラデーションの背景に使用しました。filterbutton

HTML

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

ボタンは以下のようになります。

ここに画像の説明を入力

フィドルのデモはこちら

また、に色を追加するだけでアイコンの色を変更することもできます<i>...</i>。以下のようなもの。

<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>
于 2016-02-03T14:41:38.847 に答える