标签: font-awesome-5
FontAwesome 5点击活动？
我想做什么
我刚刚从Font Awesome 4.7切换到Font Awesome 5,除了一件事之外,一切都很好:在我的网站的一部分,我使用字体真棒图标作为切换 - esk按钮.点击后,我想将"开放"的心脏改为"封闭的"心脏图标(fas fa-heart < - > far fa-heart).我可以通过在浏览器的检查器中更改SVG元素中的数据前缀来完成此操作.
问题
我的问题是绑定点击监听器,因为那里的元素被删除并替换为SVG.我动态地将元素添加到具有这些心形图标的页面上,并且在使用JS把手生成HTML之后,我使用jquerys .on("click")方法来获取单击按钮并切换类.当元素没有被替换时,这很好,但随着SVG的变化,新的做法是什么？
可能的解决方案
我阅读了Font Awesome的"如何"指南,但它们还没有涵盖这样的主题.这是人们想要做的常见事情,因此获得人们可以使用的解决方案列表会很不错.下面是我想到的两个想法,但是FontAwesome必须提供的一个想法,但我很好奇是否有更好的方法:
- 在添加监听器之前使用短暂的超时 - 但最好是hacky.
- 单击时使用包装元素,然后在每次单击时搜索SVG元素.
- FontAwesome可以在替换图标时提供回调.
示例小提琴
这是一个简单的示例,其中一个按钮被动态地附加到文档(如果使用$(document).ready(),这可以正常工作,但我正在执行API请求,然后动态生成html).单击该按钮不会调用侦听器,因为元素尚未完成将元素替换为SVG.
https://jsfiddle.net/L748ownw/
<div id='container'></div>
$("#container").append("<i id='heart' class='far fa-heart'></i>");
$(".far").on("click", function() {
console.log("clicked");
});
此示例适用于FontAwesome 4.7,因为元素未被替换.
推荐指数
解决办法
查看次数
在font-awesome(v5)图标周围添加边框
这篇帖子之前已经提出过这个问题.但我不认为它仍然使用新的字体 - 真棒,因为他们使用svg和path元素.
我希望它围绕图标而不是圆圈.
我试过这个
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
还有这个:
text-shadow: 0px 0px 3px #000;
还有这个:
fa-border
办法
.fa-female, .fa-music{
color: #BBB;
}
.fa-female{
-webkit-text-fill-color: #BBB;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke:4px #00FF00;
}
.fa-music{
text-shadow: 0px 0px 3px #00FF00;
}<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- Female Icon -->
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
<i class="fas fa-circle"></i>
<i class="fas fa-female fa-inverse" data-fa-transform="shrink-6 fa-border"></i>
</span>
<!-- Music Icon -->
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, …推荐指数
解决办法
查看次数
Font Awesome 5(带CSS)fa-layers
我从版本4.7升级到Font Awesome 5(FA 5).原因是分层图标.在FA 4.7中,使用了fa-stack类.在FA 5中,fa层非常强大.
据我所知,这个问题fa-layers只在Font Awesome的纯js版本中实现.(使用fontawesome-all.js).如果要使用css版本,则不会fa-layers在文件夹结构中的任何位置看到类(在当前版本的5.0.8中).是否可以使用FA-5的css版本的fa层？
通过css版本我的意思是:
<head>
<!--core first + styles last-->
<link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>
Bt Js版本,我的意思是:
<head>
<!--load everything-->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
由于fontawesome-all.js将所有i标签替换为svg,因此使用此版本很难进行css操作.所以,如果css版本具有Js版本的所有功能,我想向我们发送FA 5的css版本.
推荐指数
解决办法
查看次数
FontAwesome css内容未显示
我试图在CSS的内容中使用FontAwesome.
它出现在图标的代码而不是图标的代码中.我已经关注了在线帮助,但仍然没有工作
css
@font-face {
font-family: 'FontAwesome';
src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
}
.fp-prev:before {
color:#fff;
content: '/f35a';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
推荐指数
解决办法
查看次数
带有Font Awesome 5图标的复选框
是否有人已经设计了内部带有5个超赞字体图标的复选框？
我已经在Google上搜索过，仅找到FA-4的示例，例如http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
我更新到FA5并使用CSS伪元素来运行其他内容，但在复选框内未运行。我愿意接受其他没有伪元素的解决方案。
提前致谢！
小提琴示例：
/* Checkboxes */
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox label {
padding-left: 0;
}
.checkbox label:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
vertical-align: bottom;
margin-right: 10px;
line-height: 20px;
text-align: center;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
font-family: "FontAwesome";
}
.checkbox input[type="checkbox"]:checked+label::before {
content: "\f00c";
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="checkbox">
<input type="checkbox" id="profile_notifications" value="" checked/>
<label for="profile_notifications">
I agree
</label>
</div>推荐指数
解决办法
查看次数
Font Awesome 5和Angular 5
我正在使用font-awesome npm包(这是Font Awesome 4.7版本),但我想升级到Font Awesome 5.我已经安装了以下软件包:
"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",
我正在使用这样的图标:
<i class="fa fa-plus"></i>
在新版本中,我尝试使用这样的图标:
<i class="fas fa-sign-out-alt fa-2x"></i>
但这不起作用.我尝试添加这样的图标:
import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);
在我的app.module.ts中,它正在工作,但我不想逐个导入每个图标.有没有办法像我以前的版本一样使用它们？有没有办法不逐一导入它们？
谢谢
推荐指数
解决办法
查看次数
FontAwesome 5-彩色图标
FontAwesome 5提供了数千个使用SVG构建的图标。这样，使用即可轻松为整个图标着色fill。但是，如果我想使用多种颜色怎么办？例如，给定图标Google，我想为它着色：
推荐指数
解决办法
查看次数
react-fontawesome 导入所有图标
I'm trying to import just the fontawesome icons I need as the full library is 3mb. I've swapped to the fontawesome-react component to enable this but I'm not having much luck.
Here's my test case:
Package includes:
"@fortawesome/fontawesome-svg-core": "^1.2.4",
"@fortawesome/pro-regular-svg-icons": "^5.3.1",
"@fortawesome/react-fontawesome": "^0.1.3",
Component:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/pro-regular-svg-icons';
// In Render:
<FontAwesomeIcon
icon={ faThumbsUp }
/>
Results in an include size of 1MB Is this expected behaviour?
It appears to be following …
推荐指数
解决办法
查看次数
如何在 React Native 中旋转字体真棒图标？
在我的 React Native 应用程序中，我有一个很棒的字体图标。我想旋转它。需要帮助。
import React from 'react'
import { View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
const InfoBox = () => {
return (
<View >
<Icon name={'hand-holding-usd'} size={20}/>
</View>
)
}
export default InfoBox;
推荐指数
解决办法
查看次数
使用 bootstrap 5 不会出现密码字段中的眼睛
使用 Bootstrap v5 和 FontAwesome v5 时，我无法让眼球出现在表单的右侧。相反，它将密码字段拉到比用户名字段更靠右的位置，并且眼睛不会显示。
<div class="input-group mb-3">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input class="form-control" id="username" name="username" placeholder="Username" value="">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input class="form-control" id="password" name="password" placeholder="Password" value="">
<span class="input-group-text"><i class="far fa-eye-slash" id="togglePassword"></i></span>
</div>
JavaScript
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the eye icon
this.classList.toggle('fa-eye');
});
推荐指数
解决办法
查看次数
标签 统计
font-awesome-5 ×10
font-awesome ×6
css ×5
html ×2
angular ×1
angular5 ×1
bootstrap-5 ×1
jquery ×1
react-native ×1
reactjs ×1
stylesheet ×1
svg ×1