我正在尝试在我的网页上添加来自 academicons 的 ResearchGate 表情符号这是 font-awesome 的扩展。表情符号应如下所示:
当我在计算机上打开 index.html
(user/name/path/to/index.html
) 时,它工作正常,但当我打开我的 index.html
时,它就不起作用了我打开我的网页 (www.blabla.bla.bl
)。当然,我确实确保在服务器上多次复制 (scp
) 我的整个目录(包括图像、css 等)。我已经做了好几次了,现在已经等了10个小时了,但显示仍然不正确。显示取决于我用来观看网页的网络浏览器。 Safari 和 GoogleChrome 显示 Firefox 显示 。请注意,其他字体很棒的图标也可以正常工作。
这是index.html中的代码
<li>
<a href="https://www.researchgate.net/profile/MyName">
<i class="ai ai-researchgate"></i>
</a>
</li>
这段代码包装在 ul
和 social-icons
类的 div
中
这是我的style.css
.social-icons {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/*background: #202020;
border-top: 1px solid #1A1A1A;*/
background: #2b2b2b;
width: 250px;
z-index: 2;
height: 45px;
}
.social-icons ul {
padding: 0;
margin: 0;
list-style: none;
}
.social-icons li {
float: left;
width: 33%;
padding: 10px;
text-align: center;
}
我不太明白 font-awesome 和学术界是如何工作的,但这是学术界.css 中的代码
.ai-researchgate:before {
content: "\e602";
}
您知道什么可能导致此行为吗?
编辑
<link rel="stylesheet" href="css/academicons.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/perfect-scrollbar-0.4.5.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/style.css">
<link id="theme-style" rel="stylesheet" href="css/styles/default.css">
字体文件的链接位于 .css 文件中。
关于 font-awesome.css
@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=3.2.1');src:url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
关于academicons.css
@font-face {
font-family: 'academicons';
src:url('fonts/academicons.eot?j69par');
src:url('fonts/academicons.eot?#iefixj69par') format('embedded-opentype'),
url('fonts/academicons.woff?j69par') format('woff'),
url('fonts/academicons.ttf?j69par') format('truetype'),
url('fonts/academicons.svg?j69par#academicons') format('svg');
font-weight: normal;
font-style: normal;
}
最佳答案
最可能的情况是您的 Web 服务器未配置为提供大多数现代 Web 字体使用的 MIME 类型。因此,由于您可能无法重新配置服务器本身,因此您需要为每个元素添加一些服务器指令。
对于 IIS,请使用 this answer 中的指令在你的 web.config 中:
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="application/font-sfnt" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>
staticContent 部分可以在 system.web 部分中找到(或需要添加到)。
对于 Apache,添加 these directives到您的 .htaccess 文件:
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype .otf
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/font-woff .woff
关于html - 字体很棒:表情符号在我的计算机上看起来与实际网页上不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30290216/