问题标签 [font-awesome]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
918 浏览

twitter-bootstrap - 从 font awesome SVG 文件手动创建 SVG 文件时,无法从 fontcustom 创建正确大小和对齐的图标

我正在尝试从 fontawesome 的 svg 文件 (fontawesome-webfont.svg) 中提取 SVG 文件,以便我只能使用特定字体并使用 fontcustom 创建自己的自定义字体。所有这些都是为了减少字体文件的大小,因为我没有使用所有 300 个左右的 fontawesome 图标,而只是少数。

如何为现有图标提取 SVG 文件?我尝试了很多组合,其中之一是:

从 font-awesome.min.css,我知道图标日历是:

接下来,从 fontawesome-webfont.svg 中,我复制了以 d=" 开头的图标日历的字形代码,并创建了一个新的 SVG 文件(通过前缀路径)calendar.svg 以供 fontcustom 使用。

如果我不包含 style=fill 行,那么 SVG 将不会在浏览器中呈现,因此 fontcustom 将创建一个空白 TTF 文件。

到目前为止,一切都很好。所以能够手动创建一个 SVG 文件,并运行 fontcustom 脚本来生成 fontcustom.css 和其他字体文件。但是,现阶段存在多个问题:

  1. 结果图标的大小与我使用 font awesome 的大小不同。它相当大。这与在 SVG 中指定我缺少的某些内容有关。但我不知道从哪里复制它!

  2. 一些图标是旋转的。例如,星形图标会略微旋转。

    .icon-star-empty:before { 内容: "\f006"; }

它必须与手动创建的单个 SVG 文件有关。我错过了什么?还是有别的东西?

0 投票
1 回答
807 浏览

ruby-on-rails - 字体很棒的 sass rails 的奇怪异常

正如你在下面看到的,我已经清楚地尝试使用带有类 user-md 的图标,但这以某种方式显示为 ubuntu 图标。我非常非常困惑。

在此处输入图像描述

另外,另一个异常...我有一个导航列表,如 twitter bootstrap 中所述... http://twitter.github.com/bootstrap/components.html#navs

由于某种原因,活动 li 显示了 icon-glass .. 覆盖在所需的 icon-home 上。正常的 li 只显示房子。

在此处输入图像描述

我正在使用带有 GNOME Shell 3.6.2 的 ubuntu 12.10,这是我的 gemfile 锁定文件:

0 投票
1 回答
3055 浏览

ruby-on-rails - 如何使用 twitter-bootstrap 将“Font Awesome”添加到我的应用程序中?

可能重复:
Rails:使用 Font Awesome

我有 Rails 应用程序,我在其中使用了许多 twitter-bootstrap 的图标。

为此,我确实将“boostrap.css.erb”直接放在/assets/stylesheets/文件夹中,
也将“glyphicons-halflings-white.png”和“glyphicons-halflings.png”直接放在/assets/images/文件夹中。

现在我刚刚下载了 Font Awesome 并解压了。
我猜我必须对这些文件做些什么。谁能告诉我如何设置?

/css/ 文件夹

  • 字体真棒ie7.min.css
  • 字体真棒.css
  • font-awesome.min.css

/字体/ 文件夹

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff
  • FontAwesome.otf
0 投票
21 回答
631944 浏览

html - 我可以更改 Font Awesome 图标颜色的颜色吗?

<a>出于某种原因,我必须将我的图标包装在标签中。
有没有办法将字体真棒图标的颜色更改为黑色?
还是只要它包裹在<a>标签中就不可能?字体真棒应该是字体而不是图像,对吧?

在此处输入图像描述

0 投票
1 回答
1376 浏览

ruby-on-rails-3 - IE8 和 Chrome 中不显示 Fontawesome 图标(仅限 Windows)

我正在构建的 Rails 应用程序遇到问题。我正在使用 fontawesome 来渲染一些图标。rails 应用程序在 Heroku 上运行。

问题是在 Chrome/Win 和 IE8 上,图标没有呈现。没有盒子 - 什么都没有。它们在 IE9、Firefox/Win 中呈现,并且它们在 OS X 中的所有浏览器上呈现。

我有以下内容application.rb

字体文件位于 assets/font 目录中,SCSS 文件有:

有没有人遇到过类似的问题?(我读过的大多数帖子要么显示不是问题的框,要么围绕字体在 Firefox 中不起作用的问题。)

0 投票
1 回答
6563 浏览

css - Fontwesome 未加载

我目前在一个项目中使用 Fotawesome。问题是,当我加载网页时,我只看到块而不是图标。字体“在服务器上找不到”,但我确定它们位于正确的位置(我可以自己浏览文件)。当我使用 localhost 加载网页时,一切正常。我的电脑上没有安装 Fontawesome。难道这与mimetypes有关吗?我该如何解决?(我使用的是 apache 服务器)

0 投票
2 回答
7206 浏览

css - Font-Awesome 图标无法在 Android 版 Chrome 上正确显示

我的 Font-Awesome 图标无法在 Chrome for Android 的以下页面上正确呈现:

http://nylen.tv/public/chrome-issue.html

每个td.description元素(ZZZZZ 行)的末尾都有一个或两个 Font-Awesome 图标。在我的 Galaxy Nexus 上,如果页面以纵向模式加载,这些不会显示。如果页面以横向模式加载,它们会显示,但如果手机随后翻转到纵向模式,它们就会消失。我的 Nexus 7 上也出现了类似的问题。

我不认为我的标记有问题。它适用于我尝试过的所有其他浏览器,并且 HTML 和 CSS 验证除了 Font-Awesome 的供应商前缀 CSS 属性。

有没有人见过这样的东西?任何解决方法?

0 投票
1 回答
1769 浏览

ruby-on-rails - 如何在表单构建器中获取提交按钮值?

我正在使用simple_formRails 3.2 上的 gem 创建一个表单。

我遇到的问题是我希望在我的表单行中添加一个font-awesome图标。f.button :submit由于输出是类型,input我无法在其中嵌入图标元素。

我可以简单地将submit按钮硬编码到包含图标的表单中,但我不确定如何获取按钮值 - Create %model/ Update %model

我的代码发布在下面:

预期输出:

或更新ModelName,具体取决于控制器操作。

0 投票
1 回答
1017 浏览

css - Font-Awesome icons look strange in IE9 and IE8

I'm using the font-awesome library for icons/buttons in my site.

Not using bootstrap, just plugging them in directly.

In IE9 and IE8, the icons double up and it's driving me bonkers!

Anyone know what this might be?

enter image description here

0 投票
1 回答
3431 浏览

css - 如何将字体图标添加到手风琴 - zurb Foundation

我正在使用 Zurb Foundation,正在研究手风琴。Zurb 手风琴带有一个用作切换器的 CSS 三角形,但我想使用两个字体很棒的图标,这取决于 li 是否具有活动类。现在我得到了图标图像的占位符。

如果可能的话,宁愿只用 CSS 来做这件事。

这是我的CSS

这是HTML