爲什麼我無法獲得帶有圖標和圖像的CSS按鈕？

Question

我儘量讓到我的按鈕的CSS圖標，而不是與形象，這裏是我的CSS按鈕：

按鈕：

<div> 
    <b> 
     <asp:Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" CssClass="bt_Valider" /> 
    </b> 
</div> 

CSS：

.bt_Valider { 
display: inline-block; 
border: 2px solid #903E71; 
color: #000000; 
border-radius: 0; 
-webkit-border-radius: 0; 
-moz-border-radius: 0; 
font-family: Verdana; 
width: auto; 
height: auto; 
font-size: 16px; 
padding: 6px 25px; 
background-image: linear-gradient(to top, #903E71, #903E71); 
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */ 
background-color: #903E71; 
float:right; 
} 

.bt_Valider:hover, .bt_Valider:after { 
    border: 2px solid #903E71; 
    color: #903E71; 
    background-image: linear-gradient(to top, #FFF, #FFF); 
    background-image: -webkit-linear-gradient(to top, #FFF, #FFF); /* for safari */ 
    cursor:pointer; 
    content: "\279C"; /* I found that with this i can make some icon */ 
} 

此代碼給我這個結果：Output image

但我想這樣做：Desired

Answer 1

不確定這是否是您想要的結果。

看到，隨着content: "\279C";您使用的是Unicode字符，含硒較多這裏http://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use/

.bt_Valider { 
 
display: inline-block; 
 
border: 2px solid #903E71; 
 
color: #000000; 
 
border-radius: 0; 
 
-webkit-border-radius: 0; 
 
-moz-border-radius: 0; 
 
font-family: Verdana; 
 
width: auto; 
 
height: auto; 
 
font-size: 16px; 
 
padding: 6px 25px; 
 
background-image: linear-gradient(to top, #903E71, #903E71); 
 
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */ 
 
background-color: #903E71; 
 
/* float:right; */ 
 
} 
 

 
.bt_Valider:hover, .bt_Valider:after { 
 
    /* border: 2px solid #903E71; */ 
 
    color: #000000; 
 
    cursor:pointer; background:transparent; 
 
    content: "\279C"; /* I found that with this i can make some icon */ 
 
}

<div> 
 
    <b> 
 
    <Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" Class="bt_Valider" >Valider</Button> 
 
    </b> 
 
</div>