问题标签 [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 投票
3 回答
10933 浏览

twitter-bootstrap - 如何让 fontawesome 在 Azure 网页部署中工作?

我们使用 Twitter Bootstrap 和FontAwesome来支持图标。

在部署到我们的一台 IIS 服务器时,我需要添加 MIME 支持。

部署到 Azure 时,我似乎没有这个能力,所以现在我的图标没有显示,因为它似乎不知道如何使用字体。

0 投票
6 回答
37784 浏览

css - 如何在css或sass中为类名起别名

我可以为 CSS 类创建别名吗?

我正在使用这种很棒的字体,并且正在尝试为某些图标类创建别名。所以那.icon-globe也叫.globe.

我怎样才能完成这样的事情?

0 投票
1 回答
10616 浏览

css - CSS,改变链接中图标字体的悬停效果

我有一个像这样的导航元素......

我正在使用 Font Awesome 来生成图标。CSS如下:

显然,这让我在悬停到 #444 时更改了文本(和图标)颜色。现在我想做的是保留它,但在悬停时将图标更改为不同的颜色。(即文本更改为#444,图标在悬停时更改为#AE0000)

我不确定解决它的最佳方法。(对于 CCS/HTML 来说还是很新的,所以任何帮助都非常感谢!)

谢谢!

0 投票
9 回答
345811 浏览

css - 带有字体真棒图标的自定义 li 列表样式

我想知道是否可以利用 font-awesome(或任何其他标志性字体)类来创建自定义<li>列表样式类型?

我目前正在使用 jQuery 来执行此操作,即:

<li>但是,当文本环绕页面时,这不会正确设置样式,因为它认为图标是文本的一部分,而不是实际的项目符号指示符。

有小费吗?

0 投票
2 回答
2042 浏览

twitter-bootstrap - 带有 twitter bootstrap 一般问题的 FontAwesome

我有一些关于在 Twitter Bootstrap 中使用 Font Awesome 的一般性问题。

我使用了他们网站上描述的 LESS 集成方法。

  1. 我认为这是一种“标志性”字体。那么为什么它会改变 Twitter Bootstrap 提供的主要文本字体呢?我可以防止这种行为吗?

  2. 与 twitter bootstrap 提供的 Glyphicon png 版本相比,图标看起来确实很模糊,尤其是在较小的尺寸下。为什么?

  3. 在标准和视网膜显示器上正确显示图标(使用 Twitter Bootstrap)的解决方案是什么?

感谢您的任何意见。

编辑:这是我遇到的问题的一个例子。

字体真棒问题

如您所见,安装 Font Awesome 后字体看起来有所不同。按钮的形状和感觉都丢失了。绿色和红色按钮的图标已使用 icon-large 渲染,但它们看起来仍然非常模糊。除此之外,我现在意识到它只是以某种方式搞砸了我的设计。

0 投票
1 回答
2487 浏览

twitter-bootstrap - 我在 Twitter Bootstrap 媒体对象中使用了 Font Awesome 图标,但它被切断了

我正在尝试text-size: 180px;在 Twitter Bootstrap Media Object中使用 Font Awesome 图标(已应用) 。具体来说,我正在尝试用 Font Awesome 图标替换 Media Object 中的图像。

但是,当我打开页面时,图标在媒体对象的顶部向上移动并被切断。

我试过[font-awesome] [twitter-bootstrap] cut off在 Stack Overflow 上搜索,它返回了 2 个结果,但都没有帮助。我还尝试为<i>标签本身和 parent设置负边距,但<div>都没有运气。

另外,我尝试制作一个 JSFiddle,但无法使其工作,因此我的网站在http://strugee.github.com/textingwhiledriving/spreadtheword.html在线。

0 投票
1 回答
2419 浏览

jquery-mobile - Font Awesome 图标与 jQuery UI 图标冲突

当我将 jqm-icon-pack-2.1.2-fa.css 添加到我的网站时,jQuery UI 字体不显示。如果我删除参考,它们会显示。我正在使用 Visual Studio 2012 创建一个 MVC4 移动应用程序。这是我引用 css 文件的方式:

如果我删除最后一个引用,jQuery 图标可以工作,但 Font Awesome 图标不工作。我试图重新排序参考文献,但没有奏效。我已经用 Firebug 检查了该页面,但看不出有什么不同。我已经确保路径也是正确的。我想发布一个指向我的网站的链接,但它位于外联网中,因此无法访问。我能提供的最好的方法是我将输入设置为 type="search" 并且搜索图标和明文图标不会出现。任何帮助将不胜感激!!

回答:我解决了这个问题,希望可以像我一样为其他人节省一些悲伤和数小时的敲击键盘的时间!当您使用 NuGet 包管理器获取 jQuery Mobile 时,它​​会添加一些名为 icons-18-black.png、icons-18-white.png、icons-36-black.png 和 icons-36-white.png 的图像文件。如果你不小心,你可能会错过这样一个事实,即 github 网站上有一些稍微不同的图像文件需要包含在 Font Awesome 中,称为 icons-18-black-pack.png、icons-18-white-pack.png 、icons-36-black-pack.png 和 icons-36-white-pack.png。请注意,这些文件的名称中包含“pack”一词,它们与 jQuery mobile 中包含的原始文件略有不同。只需确保添加丢失的文件以及与 ajax-loader 不同的 ajax-loader.png 文件即可。

0 投票
4 回答
4039 浏览

html - HTML:fontawesome 图标出现两次

我正在尝试使用 HTML5 和 FontAwesome 制作网页。我的问题是:如果我包含一个 FontAwesome 图标,它会出现两次,并且两个副本都相互堆叠(见那里:图片

我更改了一些 fontawesome.css,但在我认识到问题后,我再次从下载中复制了文件以重置我的所有更改:问题仍然存在。所以我的 .css 部分说:

我把它包括在标题中

不幸的是,我并没有真正看到问题所在。

我尝试删除 .css 中的“:before”(它到底有什么作用?),玩“display:”,添加“vertical-alignment”,因为星星有点在天空中......没有任何帮助。

有人遇到过类似的事情吗?该问题出现在 Firefox、Opera 和 IE 上。

最好的问候,安娜

0 投票
1 回答
452 浏览

intellij-idea - scss 文件中的 FontAwesome 错误

各位 web 开发人员您好,我是 SASS 的新手,使用 Intellij IDEA Ultimate 进行开发。font-awesome.scss我将文件从目录复制fontawesome/sass到我的项目中,我从 IDE 中得到了一些错误,主要是这样的结构:

它一直在唠叨冒号作为和之间的分隔,符。[class^="icon-"][class*=" icon-"]

如果该部分看起来像这样

一切看起来都很好。

此外,在生成的font-awesome.css文件中,存在一些明显的错误,因为text-decoration: inherit;肯定没有有效的 CSS 值。可能这些是错误,还是我在这里出错了?

我应该如何更改上面显示的scss文件的语法以防止错误?

我想使用,font-awesome.scss因为我也计划在整个项目中使用 SASS,如果我能以同样的方式使用fontawesome ,那就太酷了。

对此有什么建议吗?

0 投票
1 回答
2085 浏览

ruby-on-rails - 悬停时显示的第二个 Font Awesome 图标

在我的导航栏下拉列表中,当我将鼠标悬停在链接上时,图标(图标组、图标加号)还会显示另一个图标(图标过滤器)。这只发生在引导下拉菜单上。我在源文件中找不到对正在应用的“icon-filter”类的任何引用。

您可以在以下链接的下拉列表中查看不正确的图标。
http://agile-ocean-8233.herokuapp.com/

宝石文件:

应用程序.css.scss

导航下拉菜单

Bootstrap_and_overrides.css.scss