Question

我有一个带有下拉箭头的下拉字段，该字段由WebSymbolsRegular字体处理。我将字体文件上传到服务器，设置font-face并将我想要的字体符号放在：css中用于下拉列表。由于一些奇怪的原因，它不起作用，因为我之前没有真正做过这样的事情，所以可以提供帮助。

以下是代码：

＆＃13;

.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;	
}

.selectadmin:before {
  font-family: 'WebSymbolsRegular';
	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" }

＆＃13;

Answer 1

@ font-face规则应该在任何样式之前添加到样式表中。

尝试将.selectadmin位置更改为亲戚。

字体下拉箭头没有显示

1 个答案: