所以我想创建一些图标,因此以下(条纹)css
.css_circle {
background: #8a8f97;
border: 0px none transparent;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
behavior: url(../js/PIE.htc);
text-align: center;
text-decoration: inherit;
color: #FFF;
}
.genic {
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
font-family: 'Genericons';
text-decoration: inherit;
font-weight: normal;
font-style: normal;
font-variant: normal;
vertical-align: middle;
}
.genic-1_5x {
font-size: 1.5555555555555555em;
}
.genic-fb:before {
content: '\f204';
}
.boxshadow {
position: relative;
-webkit-box-shadow: #000 2px 3px 0px;
-moz-box-shadow: #000 2px 3px 0px;
box-shadow: #000 2px 3px 0px;
}
和代码
<div class="footer_contact">
<ul>
<?php if( vp_option('facebook') != ''){ ?>
<li><a href="<?php echo vp_option('facebook'); ?>" target="_blank" class="footer_contact_fb" title="Visit on Facebook"><i class="css_circle genic genic-1_5x genic-fb boxshadow"></i></a></li>
<?php } ?>
</ul>
</div>
现在这适用于chrome f.e.但不是在ie。我认为它必须是文件(格式或代码)的一些问题,因为我正在测试“Font Awesome”,除了圆圈,即不显示泛型,但是字体真棒图标,其样式在另一个css中定义。 / p>
所以我将所有文件复制到新文件中并删除旧文件以防止出现文件格式问题,并用notepad ++查看代码并使用表达式web 4运行检查,但我找不到任何内容,即不应该能够处理。
答案 0 :(得分:0)
好吧我终于明白了 - 用记事本++深入研究,将genericon与font-awesome进行了比较,发现&#34; @ font-face&#34; - 由于某种原因,在一半的源上,值和非命令都标记为粗体含义:
src:网址(&#39; ../ font / genericons-webfont.eot?#iefix&#39;)格式(&#39; embedded-的OpenType&#39), 网址(&#39; ../ font / genericons-webfont.woff&#39; )格式(&#39; woff&#39; ),
我无法找到真正的来源 - 代码本身还可以,只是... i.d.k.无论如何,我从字体awesome复制了干净的部分(,修复了链接),现在它正在工作。如果有人知道如何做到这一点,我还是想学习。