我通过CSS背景使用字体真棒旋转图标来加载页面.
/* Styles go here */
.loading-icon {
position: relative;
width: 20px;
height: 20px;
margin:50px auto;
}
.loading-icon:before {
content: "\f110";
font-family: FontAwesome;
font-size:20px;
position: absolute;
top: 0;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
<link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loading-icon"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
图标在页面中成功呈现,但它是静态的.如何使用字体真棒作为背景的动画旋转图标?请帮助.
我正在使用Font Awesome 3.2.Font Awesome刚刚发布了4.0版本.在4.0发布之前,我将在http://fortawesome.github.io/Font-Awesome/icons/上查看Font Awesome的文档.新版本具有不同的图标名称,因此难以在新旧文档之间工作.
3.2文档仍然可用吗?我可以下载3.2文档吗?
这是我的小提琴:
http://jsfiddle.net/schmudde/VeA6B/
我无法删除字体awesome图标两侧的顶部和底部填充:
span {
border: 1px solid red;
line-height: 40%;
}
i {
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
Run Code Online (Sandbox Code Playgroud)
我尝试了特定的线高和继承线高.这里有一些基本的东西我显然不理解.
我在生产IIS7服务器和本地iisexpres上都有这个错误(在我设置之后debug="false"
)
GET http://localhost:64231/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found) jquery-1.11.0.min.js:2
GET http://localhost:64231/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found) localhost/:1
GET http://localhost:64231/font/fontawesome-webfont.svg 404 (Not Found)
Run Code Online (Sandbox Code Playgroud)
我已经为web.config添加了mime类型.我还将它们添加到IIS中
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?
Font Awesome 4.0是从头开始完全重写Font Awesome.其中一个主要的新功能是图标现在是命名空间.除了命名空间之外,图标还使用基于一致性和可预测性的新命名约定.不幸的是,这个新的命名约定与Font Awesome 3.2.1有很大的不同.
是否有从Font Awesome 3.2.1到Font Awesome 4.0的升级指南?
我刚刚开始在已经有Bootstrap的MVC应用程序中使用Font Awesome.我需要使用一些图标,我已经复制font-awesome.css
到我的项目中,但图标不可见.我只提到了这个css,不确定但是想问一下是否还有其他一些文件要包括在内?
以下是我在页面中的显示方式:
刚刚在Firebug中检查并在css面板中显示如下:
请指导我如何解决它.
感谢您的帮助和指导
asp.net-mvc twitter-bootstrap font-awesome font-awesome-3.2 font-awesome-4