字體下拉箭頭不顯示

Question

我有一個下拉字段，下拉箭頭由WebSymbolsRegular字體處理。我將字體文件上傳到服務器，設置字體面並將我想要的字體符號作爲：放入CSS的下拉菜單中。由於一些奇怪的原因，它不工作，幫助將不勝感激，因爲我以前沒有做過這樣的事情。

下面的代碼：

.selectadmin { 
 
    box-sizing: border-box; 
 
    color: #666; 
 
    background: #fff; 
 
    height: 30px; 
 
    box-shadow: inset 0 -5px 7px rgba(0, 0, 0, 0.08); 
 
    border: 1px solid #d8d8d8; 
 
    border-radius: 5px; \t 
 
} 
 

 
.selectadmin:before { 
 
    font-family: 'WebSymbolsRegular'; 
 
\t content: ';'; 
 
    position: absolute; 
 
    right: 9px; 
 
    top: 0; 
 
    line-height: 235%; 
 
    height: 100%; 
 
    padding-left: 10px; 
 
    border-left: 1px solid #d7d7d7; 
 
} 
 
.selectadmin:before { 
 
    font-family: 'WebSymbolsRegular'; 
 
    content: '{'; 
 
    font-size: 18px; 
 
    line-height: 200%; 
 
} 
 
.selectadmin:after { 
 
    font-family: 'WebSymbolsRegular'; 
 
    content: '}'; 
 
    font-size: 18px; 
 
    position: absolute; 
 
    top: 0; 
 
    line-height: 120%; 
 
} 
 

 
@font-face { 
 
    font-family: 'WebSymbolsRegular'; 
 
    src: url("fonts/backend/WebSymbols-Regular.eot"); 
 
    src: url("fonts/backend/WebSymbols-Regular.eot?#iefix") format('embedded-opentype'), 
 
     url("fonts/backend/WebSymbols-Regular.woff") format('woff'), 
 
     url("fonts/backend/WebSymbols-Regular.ttf") format('truetype'), 
 
     url("fonts/backend/WebSymbols-Regular.svg#WebSymbolsRegular") format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
.glyph, .menu a:before { font-family: 'WebSymbolsRegular'; } 
 
a.glyph:hover { text-decoration: none; } 
 

 
/** colors **/ 
 
.glyph.white { color: #fff; } 
 
.glyph.black { color: #000; } 
 
.glyph.grey { color: #5c5c5c; } 
 

 
/** sizes **/ 
 
.glyph.size10{ font-size: 10px !important; } 
 
.glyph.size11{ font-size: 11px !important; } 
 
.glyph.size12{ font-size: 12px !important; } 
 
.glyph.size13{ font-size: 13px !important; } 
 
.glyph.size14{ font-size: 14px !important; } 
 
.glyph.size16{ font-size: 16px !important; } 
 
.glyph.size18{ font-size: 18px !important; } 
 
.glyph.size20{ font-size: 20px !important; } 
 
.glyph.size24{ font-size: 24px !important; } 
 
.glyph.size30{ font-size: 30px !important; } 
 
.glyph.size36{ font-size: 36px !important; } 
 
.glyph.size48{ font-size: 48px !important; } 
 
.glyph.size60{ font-size: 60px !important; } 
 
.glyph.size72{ font-size: 72px !important; } 
 
.glyph.size90{ font-size: 90px !important; } 
 

 
/** names **/ 
 
.glyph.image:before,.menu a[data-icon="image"]:before { content: "I" } 
 
.glyph.settings:before,.menu a[data-icon="settings"]:before { content: "S" } 
 
.glyph.cloud:before,.menu a[data-icon="cloud"]:before { content: "C" } 
 
.glyph.archive:before,.menu a[data-icon="archive"]:before { content: "Z" } 
 
.glyph.movie:before,.menu a[data-icon="movie"]:before { content: "M" } 
 
.glyph.html-code:before,.menu a[data-icon="html-code"]:before { content: "H" } 
 
.glyph.text:before,.menu a[data-icon="text"]:before { content: "T" } 
 
.glyph.terminal:before,.menu a[data-icon="terminal"]:before { content: "_" } 
 
.glyph.attachment:before,.menu a[data-icon="attachment"]:before { content: "A" } 
 
.glyph.folder:before,.menu a[data-icon="folder"]:before { content: "F" } 
 
.glyph.logout:before,.menu a[data-icon="logout"]:before { content: "X" } 
 
.glyph.indent:before,.menu a[data-icon="indent"]:before { content: "n" } 
 
.glyph.outdent:before,.menu a[data-icon="outdent"]:before { content: "o" } 
 
.glyph.list:before,.menu a[data-icon="list"]:before { content: "p" } 
 
.glyph.number-list:before,.menu a[data-icon="number-list"]:before { content: "q" } 
 
.glyph.move:before,.menu a[data-icon="move"]:before { content: "~" } 
 
.glyph.user:before,.menu a[data-icon="user"]:before { content: "U" } 
 
.glyph.opened-lock:before,.menu a[data-icon="opened-lock"]:before { content: "w" } 
 
.glyph.closed-lock:before,.menu a[data-icon="closed-lock"]:before { content: "x" } 
 
.glyph.portrait-view:before,.menu a[data-icon="portrait-view"]:before { content: "a" } 
 
.glyph.album-view:before,.menu a[data-icon="album-view"]:before { content: "b" } 
 
.glyph.center:before,.menu a[data-icon="center"]:before { content: "`" } 
 
.glyph.zoom-in:before,.menu a[data-icon="zoom-in"]:before { content: "+" } 
 
.glyph.zoom-out:before,.menu a[data-icon="zoom-out"]:before { content: "-" } 
 
.glyph.up:before,.menu a[data-icon="up"]:before { content: ":" } 
 
.glyph.down:before,.menu a[data-icon="down"]:before { content: ";" } 
 
.glyph.close:before,.menu a[data-icon="close"]:before { content: "×" } 
 
.glyph.scale:before,.menu a[data-icon="scale"]:before { content: "&" } 
 
.glyph.back:before,.menu a[data-icon="back"]:before { content: "(" } 
 
.glyph.forward:before,.menu a[data-icon="forward"]:before { content: ")" } 
 
.glyph.back-2:before,.menu a[data-icon="back-2"]:before { content: "<" } 
 
.glyph.forward-2:before,.menu a[data-icon="forward-2"]:before { content: ">" } 
 
.glyph.rotate:before,.menu a[data-icon="rotate"]:before { content: "*" } 
 
.glyph.close-2:before,.menu a[data-icon="close-2"]:before { content: "'" } 
 
.glyph.twitter:before,.menu a[data-icon="twitter"]:before { content: "t" } 
 
.glyph.facebook:before,.menu a[data-icon="facebook"]:before { content: "f" } 
 
.glyph.vkontakte:before,.menu a[data-icon="vkontakte"]:before { content: "v" } 
 
.glyph.linked-in:before,.menu a[data-icon="linked-in"]:before { content: "l" } 
 
.glyph.skype:before,.menu a[data-icon="skype"]:before { content: "s" } 
 
.glyph.rss:before,.menu a[data-icon="rss"]:before { content: "r" } 
 
.glyph.vimeo:before,.menu a[data-icon="vimeo"]:before { content: "m" } 
 
.glyph.youtube:before,.menu a[data-icon="youtube"]:before { content: "y" } 
 
.glyph.tumblr:before,.menu a[data-icon="tumblr"]:before { content: "k" } 
 
.glyph.lettery:before,.menu a[data-icon="lettery"]:before { content: "z" } 
 
.glyph.odnoklassniki:before,.menu a[data-icon="odnoklassniki"]:before { content: "Q" } 
 
.glyph.rss-2:before,.menu a[data-icon="rss-2"]:before { content: "B" } 
 
.glyph.favorite:before,.menu a[data-icon="favorite"]:before { content: "R" } 
 
.glyph.tag:before,.menu a[data-icon="tag"]:before { content: "," } 
 
.glyph.comment:before,.menu a[data-icon="comment"]:before { content: "c" } 
 
.glyph.chat:before,.menu a[data-icon="chat"]:before { content: "d" } 
 
.glyph.opened-chat:before,.menu a[data-icon="opened-chat"]:before { content: "e" } 
 
.glyph.rating:before,.menu a[data-icon="rating"]:before { content: "u" } 
 
.glyph.map-pin:before,.menu a[data-icon="map-pin"]:before { content: "?" } 
 
.glyph.like:before,.menu a[data-icon="like"]:before { content: "N" } 
 
.glyph.unlike:before,.menu a[data-icon="unlike"]:before { content: "O" } 
 
.glyph.search:before,.menu a[data-icon="search"]:before { content: "L" } 
 
.glyph.reblog:before,.menu a[data-icon="reblog"]:before { content: "J" } 
 
.glyph.open-in-new-window:before,.menu a[data-icon="open-in-new-window"]:before { content: "D" } 
 
.glyph.clock:before,.menu a[data-icon="clock"]:before { content: "P" } 
 
.glyph.link:before,.menu a[data-icon="link"]:before { content: "K" } 
 
.glyph.mail:before,.menu a[data-icon="mail"]:before { content: "@" } 
 
.glyph.sort:before,.menu a[data-icon="sort"]:before { content: "{" } 
 
.glyph.sort-2:before,.menu a[data-icon="sort-2"]:before { content: "}" } 
 
.glyph.unfold:before,.menu a[data-icon="unfold"]:before { content: "[" } 
 
.glyph.fold:before,.menu a[data-icon="fold"]:before { content: "]" } 
 
.glyph.icon:before,.menu a[data-icon="icon"]:before { content: "¹" } 
 
.glyph.list-2:before,.menu a[data-icon="list-2"]:before { content: "²" } 
 
.glyph.list-with-icons:before,.menu a[data-icon="list-with-icons"]:before { content: "³" } 
 
.glyph.reply:before,.menu a[data-icon="reply"]:before { content: "h" } 
 
.glyph.reply-all:before,.menu a[data-icon="reply-all"]:before { content: "i" } 
 
.glyph.forward-3:before,.menu a[data-icon="forward-3"]:before { content: "j" } 
 
.glyph.fullscreen:before,.menu a[data-icon="fullscreen"]:before { content: "%" } 
 
.glyph.done:before,.menu a[data-icon="done"]:before { content: "." } 
 
.glyph.approved:before,.menu a[data-icon="approved"]:before { content: "/" } 
 
.glyph.attention:before,.menu a[data-icon="attention"]:before { content: "W" } 
 
.glyph.synchronize:before,.menu a[data-icon="synchronize"]:before { content: "V" }

Answer 1

的@字體面規則應該之前的任何樣式添加到樣式表。

嘗試將.selectadmin位置更改爲相對。