1
我得到這些按鈕，只適用於「十六進制」，但因爲我限制爲圖標id喜歡使它可能使用字體真棒。但是當我嘗試改變時：在背景不會一直走到底部，並且沒有任何改變的情況下我不會工作。Css按鈕不工作與字體真棒，但完美的工作與十六進制
繼承人的buttons.css：
/*LOGIN BUTTON*/
.button {
cursor: pointer;
display: inline-block;
white-space: nowrap;
background-color: #1d1d1d;
-webkit-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
-moz-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
border: 1px solid black;
color:#05c7f7;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
}
.button:hover {
background-color: #ddd;
background-image: linear-gradient(top, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
.button:active {
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.button:focus {
outline: 0;
background-color: #1d1d1d;
}
.button:before {
float: left;
color:#fff;
-webkit-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
pointer-events: none;
}
/*REGISTER BUTTON*/
.button2 {
cursor: pointer;
display: inline-block;
white-space: nowrap;
background-color: #1d1d1d;
-webkit-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
-moz-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
border: 1px solid black;
color:#05c7f7;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
}
.button2:hover {
background-color: #ddd;
background-image: linear-gradient(top, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
.button2:active {
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.button2:focus {
outline: 0;
background-color: #1d1d1d;
}
.button2:before {
float: left;
color:#fff;
background-image: url("/images/background/stripe.png");
border-right:1px solid black;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
pointer-events: none;
}
hexadecimal.css：
@charset "utf-8";
/* Hexadecimal entities for the icons */
.add:before {
content: "\271A";
}
.edit:before {
content: "\270E";
}
.delete:before {
content: "\2718";
}
.save:before {
content: "\2714";
}
.email:before {
content: "\2709";
}
.like:before {
content: "\2764";
}
.next:before {
content: "\279C";
}
.star:before {
content: "\2605";
}
.spark:before {
content: "\2737";
}
.play:before {
content: "\25B6";
}
.register:before {
content: "\f044";
}
.login:before {
content: "\f044";
}
，並調用按鈕：
<div style="padding:30px; margin:0 auto; text-align: center;">
<a class="button" href="/" >Button</a>
<a class="button play" href="/" >Login</a>
<a class="button2 play" href="/" >Register</a>
<a class="button2 play" href="/" >Signout</a>
</div><br/>
<div style="padding:30px; margin:0 auto; text-align: center;">
<a class="button" href="/" >Button</a>
<a class="button" href="/" ><i class="fa fa-lock"></i> Login</a>
<a class="button2" href="/" ><i class="fa fa-pencil-square-o"></i> Register</a>
<a class="button2" href="/" ><i class="fa fa-sign-in"></i> Signout</a>
</div>
@ JF-機甲是香港專業教育學院試過，但它只會顯示一個正方形。只有十六進制的工作是那些以\ 2開頭的，但是我也嘗試過用class來改變css：before to i：before但是然後背景圖片不會一直到達按鈕的底部 – Martin
我相信if一個空的方塊顯示，css指的是一個未定義的圖標或該圖標不再可用。我試圖運行你的代碼並添加了[font-awesome css]（https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css），我沒有看到任何空盒子。參見[fiddle]（https://jsfiddle.net/oa8wyvwf/） –
@ JF-Mechs是的，但是如果你將它與工作按鈕進行比較，你可以看到它們不在廣場內，就像你在課堂上看到的那樣=「按鈕播放」其中「播放」成爲藍色方塊內的圖標 – Martin