标签: font-awesome

我有一个控制栏,其中包含连续的div.其他项目已经在文本上方有FA图标,因此屏幕尺寸没有问题,但为了区分具有更高级别控制的两个按钮来切换查看器中的内容.它们的布局如下图所示:

<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next

当这个显示在像iPhone这样的小屏幕上时,图标会移动到文本上,我希望它能够留在它旁边.原因是另一个按钮然后与它下面的图标对齐,这是看起来很糟糕的UI.

Previous<i class="fa fa-toggle-left lg"></i>

关于如何防止它们包装的任何选择？

我试图在我的D3节点中使用FontAwesome而不是文本设置一个图标.这是原始的implmentation,带有文字:

g.append('svg:text')
    .attr('x', 0)
    .attr('y', 4)
    .attr('class', 'id')
    .text(function(d) { return d.label; });

现在我尝试使用图标:

g.append('svg:i')
   .attr('x', 0)
   .attr('y', 4)
   .attr('class', 'id icon-fixed-width icon-user');

但是这不起作用,即使标记是正确的,并且CSS规则被正确命中:图标不可见.

知道为什么吗？

这是相关的jsbin

编辑

我找到了插入图像的替代方法:http://bl.ocks.org/mbostock/950642

node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

这正是我想要做的,但它不适<i>用于FontAwesome使用的元素.

我想知道是否可以使用图标字体图标(例如Font Awesome)作为Google Maps V3中的标记来替换默认标记.要在HTML或PHP文档中显示/插入它们,标记的代码将是:

<i class="icon-map-marker"></i>

如果我直接参考font-awesome.css_layouts页面.它会工作

<link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" />

但我用过BundleConfig.cs.图标未显示.

 bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/font-awesome-4.0.3/css/font-awesome.css",
                        "~/Content/bootstrap.css",                        
                         "~/Content/body.css",
                        "~/Content/site.css",
                        "~/Content/form.css"
                     ));

而且我观察到浏览器控制台对字体目录有错误. Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:51130/fonts/fontawesome-webfont.woff?v=4.0.3

可能是什么问题呢？

我想使用Font Awesome中的几个图标.

我看到我们可以下载整个font-awesome目录并使用简单的代码,<i class="fa fa-camera-retro"></i>并用于fa-camera-retro显示图标.

我可以只下载我将使用的字体吗？

因为如果我只用上面的例子<i class="fa fa-camera-retro"></i>,fa-camera-retro我想通过只使用与此相关的图标文件,以减少目录的大小.

我在我的网站中使用(优秀的)Font-Awesome,如果我以这种方式使用它,它工作正常:

<i class="icon-home"></i>

但是(出于某些原因)我想以Unicode方式使用它,例如:

<i>&#xf015;</i>

(Font Awesome的备忘单)

但它不起作用 - 浏览器显示正方形.

我该如何解决这个问题？CSS路径是正确的(作为使用Font Awesome工作的第一种方式).

编辑:我确实安装了FontAwesome.otf.

在字体真棒4中,您可以使用CSS轻松地将图标应用于:before /:after元素.

新的字体真棒5 JS/SVG实现是否可能相同？从我可以看到,这需要相关标签存在于html中,这并不总是实用的,例如你有一个CMS,并希望将图标应用于所有用户创建的内容<li>元素

我知道在FA5中你仍然可以使用旧的css/webfonts但是如果在使用JS的推荐方法中提供相同的功能会很好

我正在开发一个Rails应用程序,我们需要发送电子邮件.

我已经通过rails gem安装了字体真棒图标(https://github.com/bokmann/font-awesome-rails)(我使用.scss)

它在我的网页视图上工作正常,但在电子邮件上没有.至少gmail不会显示它们.

这是正常的 ？我可以在电子邮件视图/布局上使用真棒字体吗？如果没有,我在哪里可以找到令人敬畏的字体图标的png/svg版本,以便我在网页上使用的图标与我在电子邮件中使用的图标相同(为了保持一致性)？

在我的AngularJS应用程序中,我使用fontawesome作为我的加载微调器:

<i class="fa fa-spin fa-spinner" ng-show="loading"></i>

我也使用AngularToaster来获取依赖于ngAnimate的通知消息.当我在我的AngularJS应用程序中包含ngAnimate时,它通过以奇怪的方式设置动画来扰乱我的加载旋转器.我想阻止这种情况发生,但是无法找到一种方法来禁用这些加载器上的动画(它也很难更新我的应用程序中的每个加载器).

下面是一个傻瓜,显示我的确切问题.

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

如何在标题栏中添加图像？

我有头衔 - "Webnet"

将其与FontAwesome Glyphicon的图标图像合并为 -

<title><i class="icon-user icon-black"></i>Webnet</title>

我尝试用图像源替换它 -

<title><img src="assests/img/user-Hermosillo.png" ></img>Webnet</title>

但标题显示innerHTML而不是在那里显示图像.

有帮助吗？