问题标签 [font-awesome-5]

问问题

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.

430 问题

0 投票

3 回答

27533 浏览

html - 伪元素上的 Font Awesome 5 显示正方形而不是图标

我正在尝试span直接从 CSS 页面更改带有 Font Awesome 图标的内容，但似乎无法使其正常工作。

1) 我已经从文档和<head>

2）我的 html 看起来像这样：

3) 现在假设我想直接从 CSS 页面使用图标更改 span 的内容。

我的 CSS 目前看起来像这样，但它不起作用，它给了我一个正方形而不是图标。

有趣的是，它看起来像是在使用一些图标。如果我用content: '\f007';它进行测试。知道为什么吗？

（如果你想知道我为什么要直接在 CSS 中更改图标，那是因为我使用的是媒体查询，所以我不能直接在 HTML 页面中添加它）

0 投票

2 回答

2282 浏览

javascript - 字体真棒 5：条件变化时图标不切换

我在 react.js 项目中使用 font awesome 5，并且无法在条件语句中进行图标切换。这是示例代码：

时isRecording == true，图标应从fa-microphone变为fa-stop。但是切换不会发生。麦克风图标保持不变。

奇怪的是，当我不使用fa-layers要切换的按钮中的类时，切换发生了。但是过渡非常尴尬——图标大小和位置偏移：

知道为什么会这样吗？

javascript reactjs font-awesome font-awesome-5

0 投票

3 回答

23103 浏览

css - 字体真棒5 unicode

Font Awesome 5 星图标有<i class="fas fa-star"></i>和<i class="far fa-star"></i>不同的是fas , far和 Unicodef005现在我想用它作为我的评级系统，首先是普通星，然后通过点击变成实心星，但是我如何fas far在我的 css 中定义它？

代码

使用上面的代码，我只能得到实心星

css unicode font-awesome font-awesome-5

0 投票

1 回答

532 浏览

css - Font Awesome 的 JS 5：在堆叠图标上填充“空白部分”

使用 Font Awesome 的 JS 5 我想创建一个带有时钟和日历的简单堆叠图标。

上面的片段或多或少是我所期望的，只是我希望时钟的“内部”被填充为白色而不是透明的，所以我看不到日历。

更明确地说，这是希望的结果（一些糟糕的photoshoping......）

css font-awesome font-awesome-5

0 投票

4 回答

20215 浏览

css - 带有 Font Awesome 5 图标的复选框

有没有人已经设计了带有字体真棒5个图标的复选框？

我已经用谷歌搜索了它，只找到了 FA-4 的示例，例如http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

我更新到 FA5 并使用 CSS 伪元素运行其他东西，但在复选框内它没有运行。我对没有伪元素的其他解决方案持开放态度。

提前致谢！

小提琴示例：

摆弄 FA-4.7

摆弄 FA-5

css font-awesome pseudo-element font-awesome-5

0 投票

1 回答

243 浏览

html - 将 FontAwesome 图标添加到链接会产生工件

使用 Visual Studio Code，以下在版本 5 中简单嵌入 FA 图标会在浏览器中生成一个非常小的下划线伪影。

</a>结束标记之前的单个空格是罪魁祸首。一个明显的解决方案是不使用空格！但是，如果使用代码编辑器代码格式化将不可避免地产生大量空白，尽管浏览器将其减少为单个空白，但不可避免地会出现伪影。

我唯一的解决方案是使用合适的 CSS 选择器来防止出现下划线。

任何人都可以提出其他建议吗？

html whitespace removing-whitespace font-awesome-5

0 投票

1 回答

275 浏览

font-awesome-5 - Detect checked event after fontawesome changes radiobutton into svg element

Font-Awesome 5 has svg support, but it changes my radiobutton into a svg element, and therefore I don't know how to get the onchange event. In the DOM if you inspect the radio buttons it looks like <svg ... > not <input ... >

HTML

CSS

http://jsfiddle.net/patrickinminneapolis/45pLwrvz/44/

font-awesome-5

0 投票

1 回答

713 浏览