主机上传后 CSS 图标不起作用

Posted 2023-03-06

【中文标题】主机上传后 CSS 图标不起作用

【英文标题】：Css Icon Does Not Work After Host Upload

【发布时间】：2013-10-04 19:32:35

【问题描述】：

我在我的 Web 项目和 asp.net 中使用模板。在本地主机中，我的图标清晰可见，如图片顶部，但是当我将其上传到主机时，它看起来像正确的下方。当我查看模板的 css 代码时，我看到的是这样的：

@font-face 
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.1.0');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') 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;


[class^="icon-"]:before, [class*=" icon-"]:before 
    text-decoration: inherit;
    display: inline-block;
    speak: none;


.icon-large:before 
vertical-align: -10%;
font-size: 1.3333333333333333em;


a [class^="icon-"], a [class*=" icon-"], a [class^="icon-"]:before, a [class*=" icon-"]:before 
display: inline;


[class^="icon-"].icon-fixed-width, [class*=" icon-"].icon-fixed-width 
display: inline-block;
width: 1.2857142857142858em;
text-align: center;


[class^="icon-"].icon-fixed-width.icon-large, [class*=" icon-"].icon-fixed-width.icon-large 
    width: 1.5714285714285714em;


ul.icons-ul 
list-style-type: none;
text-indent: -0.7142857142857143em;
margin-left: 2.142857142857143em;


ul.icons-ul > li .icon-li 
    width: .7142857142857143em;
    display: inline-block;
    text-align: center;


[class^="icon-"].hide, [class*=" icon-"].hide 
display: none;


.icon-muted 
color: #eee;



.icon-glass:before 
content: "\f000";

我不擅长css。那是什么，我该如何解决？

【问题讨论】：

你也上传了字体吗？

是的，我确实上传了。编辑：Upss。当我在 Visual Studio 中发布我的项目时，它不会将字体文件夹放在发布目录中。我通过了。

如果无法访问您的虚拟主机，就很难看出问题所在。字体是否在正确的地图中？与您指定的路径完全相同？我的意思是这一行：../font/fontawesome-webfont.eot?v=3.1.0

我会回答这个问题，接受它，然后它就不会显示为未回答。

【参考方案1】：

确保您也将字体上传到网络主机，并根据此行正确链接：../font/fontawesome-webfont.eot?v=3.1.0