标签: font-awesome-5
不能使用任何以“-o”结尾的 Fontawesome 图标
对于一个网站，我想使用 fontawesome 中的图标。例如，我需要使用心形图标：
作品：
<i class="fa fa-heart" aria-hidden="true"></i>
该图标可用作填充版本或仅轮廓，我只需要图标的“轮廓”版本。要获得大纲版本，您只需通过添加“-o”来更改相应的 CSS 类，如下所示：
不起作用：
<i class="fa fa-heart-o" aria-hidden="true"></i>
但是“-o”版本只是不显示。fontawesome 网站上声明了许多图标，可以在其中添加“-o”以仅显示轮廓。但是当我尝试时，它们都没有显示。正常的图标工作。我还在所有下载的 CSS 文件中搜索了“-o”声明，但没有找到任何东西！就像他们没有实施一样..
我找不到问题。在我看来，他们“忘记”在最新的 Fontawesome 5.0.4 文件中实现“-o”版本。
PS：我通过下载 CSS 文件“fontawesome-all.min.css”将图标添加到我的项目中。使用此链接可搜索图标，例如“心形”。
就像要求的那样，我的整个代码：
<!DOCTYPE html>
<head>
<link href="http://127.0.0.1:8000/css/fontawesome-all.min.css" rel="stylesheet">
<link href="http://127.0.0.1:8000/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h6 class="card-title">Some Title</h6>
<!-- Stats -->
<p class="card-text font-weight-light">
<span class="mr-4"><i class="fa fa-comment" aria-hidden="true"></i>0</span>
<span class="mr-4"><i class="fa fa-heart" aria-hidden="true"></i>0</span>
<span><i class="fa fa-star" aria-hidden="true"></i>0</span>
</p>
</div>
</div>
</div>
</div> …推荐指数
解决办法
查看次数
fontawesome 5 with sass
我在使用字体awesome 5和sass时遇到问题我已经按照他们网页上的说明开始了但是我似乎可以看到图标显示我有一个目录
C:\用户\ MYNAME \学习\ PUBLIC\SCSS \供应商\字体真棒\ fontawesome.scss
在我的public\scss文件夹中我有一个home.scss文件,我在其中导入fontawesome.scss如下
@import"vendors/font-awesome/fontawesome.scss";
当我编译代码时,它显示了fontawesome类和东西当我在网页上看到没有字体只是大白方进一步研究告诉我它没有加载webfonts我把webfonts文件夹放在我的项目在这个目录中
C:\用户\ MYNAME \学习\公共/网络字体
在_variables.scss文件中,我将fa-path修改为指向"../webfonts"; 但这没有任何作用我真的很感激任何有助于我解决这个问题的见解,因为遵循在线指令字体真棒5与sass似乎并不适合我.
推荐指数
解决办法
查看次数
Angular 5 with Font Awesome 5
经过一些研究,包括使用Angular,文档等阅读Font Awesome 5,我无法在Angular 5 App和Font-Awesome 5(Pro)之间进行整合.
问题:图标没有出现.
有关我当前场景的更多详细信息:
package.json:
(...)
"dependencies": {
"@angular/animations": "^5.2.4",
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/core": "^5.2.4",
"@angular/forms": "^5.2.4",
"@angular/http": "^5.2.4",
"@angular/platform-browser": "^5.2.4",
"@angular/platform-browser-dynamic": "^5.2.4",
"@angular/router": "^5.2.4",
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-pro-light": "^5.0.6",
"bootstrap": "^4.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"popper.js": "^1.12.9",
"prismjs": "^1.11.0",
"rxjs": "^5.5.6",
"summernote": "^0.8.9",
"sweetalert2": "^7.11.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular/cli": "^1.7.0-rc.0",
"@angular/compiler-cli": "^5.2.4",
"@angular/language-service": "^5.2.4",
"@types/jasmine": "^2.8.6",
"@types/jasminewd2": "^2.0.3",
"@types/node": …angular-cli font-awesome-5 angular angular5 angular-fontawesome
推荐指数
解决办法
查看次数
字体真棒5图标未显示
我使用codeigniter和Font Awesome 5我已经下载了最新版本的Font Awesome 5，但是由于某种原因我的图标没有显示
问题如何使图标以超棒的字体显示5我正在使用xampp
它应该在登录文本旁边显示，开发控制台中没有错误
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/bs/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/stylesheet.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/fa/web-fonts-with-css/fontawesome-all.min.css');?>">
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.2.1.slim.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/popper.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/plugins/bs/js/bootstrap.js');?>"></script>
</head>
<body>
<div class="row mb-3">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="<?php echo base_url('login');?>" class="btn btn-dark"><i class="fas fa-sign-in-alt"></i> Sign …推荐指数
解决办法
查看次数
谷歌地图 v3 FontAwesome5
我正在尝试创建一个使用动态 fontAwesome 标记的 googleMap
不过，我似乎无法将“Font Awesome 5 Free”设置为要使用的字体。
我可以设置有效的“Fontawsome”，但它不是网络字体（它是我系统中安装的 .TTF）
var marker0 = createMarker({
position: new google.maps.LatLng(33.808678, -117.918921),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#F00',
fillOpacity: 1,
strokeWeight: 0,
scale: 15
},
label: {
fontFamily: "FontAwesome",
fontWeight: '900',
text: eval("'\\u"+'f0ab'+"'"),
color: 'white'
}
}, "<h1>Marker 0</h1><p>This is the home marker.</p>");
});
这是 jsfiddle：https ://jsfiddle.net/robsilva/hxt5jcu5/
看起来谷歌地图没有将 font-family 属性应用于我创建的标记标签。根据谷歌的文档，语法看起来是正确的，但由于某种原因，所有的风格都没有被应用。以下是我们手动将字体系列样式放置在正确元素上的一些前后屏幕...
javascript google-maps-api-3 google-maps-markers font-awesome font-awesome-5
推荐指数
解决办法
查看次数
在输入的占位符文本中使用Font Awesome（5）图标
我遇到了很多使用Font Awesome <5解决此问题的方法，但是我似乎无法使用Font Awesome 5解决任何问题。
这是指向在占位符文本中添加Font Awesome图标的资源。
<input style="font-family:FontAwesome !important" type="text" placeholder="">
推荐指数
解决办法
查看次数
Font Awesome 5，如何设置 svg 伪元素的样式？
我正在使用 font awesome 5 伪元素将:after标签附加到我的元素上，如下所示
&:after {
content: "\f068";
font-weight:400;
color:$brandRed;
float:right;
font-family: "Font Awesome 5 Pro";
}
哪个添加内容很好，但我添加的样式，特别float:right是没有添加到用字体真棒生成的SVG？
如上图所示，SVG 元素已正确加载，但:after标签上有float:right样式，而 SVG 没有指定任何样式？为什么它不接管样式？
根据他们的文档，他们说要像这样添加所有样式
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
为什么样式没有延续？
推荐指数
解决办法
查看次数
SCSS 动画复选框：动态宽度
我有一个动画翻转 SCSS 复选框，但有两个问题无法解决：
a) 我希望有一个基于内容而不是静态的动态宽度。问题是我有 2 个内容，一个是“已选中”，一个是“未选中”
b) 我希望同时添加图标（使用 fontawesome 5）和文本，而不是排他的（我的意思是图标 + 文本）。在最坏的情况下，我希望有一种方法可以使用图标或文本
这是我如何定义它：
<input class="btn-toggle btn-toggle-flip" id="cb5" type="checkbox" />
<label class="btn-toggle-label" data-tg-off="UNSAVED" data-tg-on="SAVED" for="cb5"></label>
SCSS太长了，最好看这里的示例：
https://codepen.io/cdemez/pen/QWjXRjw
对于这两个问题，请在 SCSS 中搜索文本“data-tg-off”；-)
你有什么主意吗？
谢谢
推荐指数
解决办法
查看次数
Font Awesome 5免费CSS/Webfonts伪字符未显示
我有一个问题,外部链接字符没有显示在伪元素样式.其他角色正在显示.
Font-Awesome 5.0.6免费,CSS/Webfont版本,包含在CDN中:https://use.fontawesome.com/releases/v5.0.6/css/all.css
这适用于我的正常身体内容:
<i class="fas fa-external-link-alt"></i>
在CSS中,这不起作用:
a:after {
font-family: 'Font Awesome 5 Free';
content: '\f35d';
}
在伪中使用另一个字符可以工作:
a:after {
font-family: 'Font Awesome 5 Free';
content: '\f152';
}
根据文档,外部链接图标是FA5免费套装的一部分:https://fontawesome.com/icons/external-link-alt？style = solid
这是一个错误还是我错过了什么？
编辑1:JS小提琴示例:https: //jsfiddle.net/berjcaLy/4/
编辑2:意外地发现包装<a>标签<b>或<strong>将使外部链接伪图标工作.(JSfiddle也更新了)
推荐指数
解决办法
查看次数
如何在角度组件中使用字体很棒的品牌图标？
我正在尝试在 Angular 10 应用程序中使用 Font Awesome 品牌图标。我已经安装了 fontawesome 并尝试使用以下命令导入它：
import { faDiscord } from '@fortawesome/fontawesome-free-brands';
在我的组件中。然后我将 faDiscord 分配给一个属性，并尝试在我的 html 中像这样使用它：
<fa-icon [icon]="faDiscord"></fa-icon>
但是，我的组件现在卡在加载中，我该如何解决这个问题？已经看到这个问题：How do i usebrand fontawesome icon in Angular
推荐指数
解决办法
查看次数
Fontawesome 图标采用不同的宽度
我正在使用 Tailwind CSS 和 Font Awesome Icons。这里的图标显示如下，
是不是不适合调整每个div的宽度。这是我的代码（对于一个元素），
<!-- Navigation Link-->
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fas fa-tags"></i>
</div>
<div>Products</div>
</div>
</div>
<!-- End Navigation Link-->
我的问题是如何在不改变每个元素的情况下进行调整。
推荐指数
解决办法
查看次数
标签 统计
font-awesome-5 ×11
font-awesome ×7
css ×5
angular ×2
html ×2
javascript ×2
sass ×2
angular-cli ×1
angular5 ×1
fonts ×1
icons ×1
input ×1
placeholder ×1
tailwind-css ×1