Question

所以我正在为未来的一组项目创建一个glyphicon库。我相信我已经使用css正确设置了图标集，但它没有显示某些原因。

svg文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<metadata></metadata>
<defs>
<glyph unicode="&#xf000;" d='M3,18H13V16H3Zm0-5H21V11H3ZM3,6V8H17V6Z'/>
</font>
</defs></svg>

css文件

@font-face{
    font-family: 'SupportWorks';
    src: url('../font/sw-icon-proto.svg#supportworksicons') format('svg');
    font-weight: normal;
    font-style: normal;
}
.sw {
  display: inline-block;
  font: normal normal normal 14px/1 SupportWorks;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
@-webkit-keyframes sw-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes sw-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.sw-menu:before{
    content: "\f000";
}

我发现图标以压缩格式存储在单个svg文件中，并通过css doc中的unicode显示出来。

非常感谢对此提出任何建议！提前谢谢你。

创建标志符号图标，图标不显示

0 个答案: