标签: font-awesome
优化Font Awesome仅用于已使用的类
我使用Font Awesome Sass文件https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass使它成为_font-awesome.sass所以我可以@import在我的Sass项目中.我也在使用http://middlemanapp.com/将Sass转换为Css.问题:
有没有办法只将已使用的图标类带入我转换后的.css？因为现在它带有_font-awesome.sass的所有类
奖励:是否可以使用已使用的图标类以某种方式重新编译字体,以使其在生产使用中更小？
如果我能得到上面#1的一些提示,那就太棒了.
谢谢.
推荐指数
解决办法
查看次数
从Font Awesome中提取SVG
我想从Font Awesome字形中获取SVG路径数据,以便我可以在HTML中直接使用它们作为SVG.我认为这就像从fontawesome-webfont.svg复制粘贴路径数据一样简单,但是当我在HTML中使用它时,符号都是颠倒的.谁知道为什么？
(见小提琴)
字体真棒SVG:
<glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />
...移植到HTML SVG(并按比例缩小):
<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 …推荐指数
解决办法
查看次数
如何在React的render()中包含一个Font Awesome图标
每当我尝试在React中使用Font Awesome图标时render(),虽然它在普通HTML中工作,但它不会显示在生成的网页上.
render: function() {
return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
这是一个实例:http://jsfiddle.net/pLWS3/
故障在哪里？
推荐指数
解决办法
查看次数
如何知道是否已加载字体(@ font-face)？
我正在使用Font-Awesome,但是在未加载字体文件时,图标显示为.
所以,我希望这些图标display:none不会加载文件.
@font-face {
font-family: "FontAwesome";
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
我怎么知道这些文件已经加载,我终于能够显示图标了？
编辑: 我没有在页面加载(onload)时说话,因为字体可以在整个页面之前加载.
推荐指数
解决办法
查看次数
Twitter Bootstrap中的Font Awesome vs Glyphicons
我是网络开发的初学者,我最近开始使用Twitter Bootstrap,我知道它使用了我已经知道如何使用的Glyphicons.但我也遇到了Font Awesome,它说它是为Bootstrap而构建的.
两者有什么不同？我的意思是另一个替代？或者你应该在不同的地方使用它们？
推荐指数
解决办法
查看次数
字体真棒没有显示图标
我正在使用Font Awesome并且不希望使用HTTP添加CSS.我下载了Font Awesome并将其包含在我的代码中,但Font Awesome正在显示一个带框的方框而不是图标.这是我的代码:
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>
我想知道如何制作图标显示而不是带边框的方框.
推荐指数
解决办法
查看次数
使用FontAwesome或Glyphicons与css:之前
content:在使用:before伪元素时,有没有办法在css 元素中嵌入HTML ？
我想在这样的用例中使用Font Awesome(或Glyphicon):
h1:before {
content: "X";
padding-right: 10px;
padding-left: 10px;
color: @orangeLight;
}
哪里X是一样的东西<i class="icon-cut"></i>.
我当然可以在HTML中手动执行此操作,但我真的想:before在这种情况下使用它.
同样,有没有办法<i>用作列表子弹？这可行,但对多行子弹项目的行为不正确:
<ul class="icons">
<li><i class="icon-ok"></i> Lists</li>
<li><i class="icon-ok"></i> Buttons</li>
<li><i class="icon-ok"></i> Button groups</li>
<li><i class="icon-ok"></i> Navigation</li>
<li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>
推荐指数
解决办法
查看次数
i标记的Alt或title属性
我使用font-awesome并显示他们的字体:
<i class="icon-lock"></i>
这将显示一个漂亮的小锁符号.为了让用户知道究竟是什么意思,我尝试添加诸如title和alt之类的属性,但无济于事.
是否有任何属性我可以用于<i>执行与图像和标题链接相同的任务的标记？
推荐指数
解决办法
查看次数
更改FontAwesome图标的字体粗细？
我想让其中一个FontAwesome图标稍微沉重一点 - 它比我使用的字体重得多.这是它目前的样子:
:
丑,对吧？所以我尝试重置font-weight如下:
.tag .icon-remove {
font-weight: 100;
}
该属性似乎在CSS中正确设置,但它没有效果 - 图标看起来和以前一样重.我也试着font-weight: lighter和-webkit-text-stroke-width: 1px没有效果.
有什么方法可以让图标减轻重量吗？文档说" 你可以用CSS字体样式做什么,你可以用Font Awesome做 ",但我无法弄清楚如何做到这一点.
推荐指数
解决办法
查看次数
如何使用相对路径在Webpack中使用SCSS(SASS)加载font-awesome？
我的node_modules文件夹中有font-awesome,所以我尝试在我的主.scss文件中导入它,如下所示:
@import "../../node_modules/font-awesome/scss/font-awesome.scss";
但是,告诉我,Webpack捆绑编译失败了
Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot
因为font-awesome.scss文件引用了一个相对路径'../fonts/'.
如何告诉scss\webpack @import另一个文件,并将该文件的文件夹用作主文件夹,以便其相对路径按预期工作？
推荐指数
解决办法
查看次数
标签 统计
font-awesome ×10
css ×5
html ×2
sass ×2
font-face ×1
glyphicons ×1
html5 ×1
javascript ×1
jquery ×1
node.js ×1
npm ×1
reactjs ×1
svg ×1
tags ×1
webpack ×1