标签: font-awesome
Bootstrap 按钮中独立 font-awesome 图标的高度
我在 Bootstrap 按钮上设置了不同的高度，其中按钮仅包含Font Awesome 图标。
这是我的应用程序中的样子：
左边的按钮组高34px，右边的按钮组高28px。
但是，在使用 Bootply 等时，我没有看到同样的问题，例如： http: //www.bootply.com/BKDSnIXVQH。这里的图标高度相同。
所以我一定做错了什么，但我无法诊断！
在 Chrome 元素检查器中，左侧按钮文本的顶部和底部有一个间距，但fa右侧图标周围没有这样的间距。两个按钮的样式padding-相同，因此我不知道间距从何而来。line-height并且font-size都是一样的。
如果我向按钮添加一些文本，fa它们将返回到正确的高度。
鉴于我没有提供足够的可重现示例，我不希望有人回答这个问题，但我至少如何诊断问题是什么？
推荐指数
解决办法
查看次数
如何在使用 font Awesome 的同时更改字体大小？
因此，我创建了一个个人简历网站，并且偶然发现了一些非常酷的东西：font Awesome，它以文本形式提供图形，允许您通过 CSS 添加字体效果。我的问题是一切都很好，直到我尝试更改字体大小，无论出于何种原因它都不会改变。你有什么想法？我也是新来的，我已经阅读了如何发帖，但如果我做错了，请告诉我。
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.toggle_menu{
position: fixed;
padding: 15px 20px 15px 15px;
margin-top: 70px;
color: white;
cursor: pointer;
background-color: #648B79;
z-index: 1000000;
font-size: 8em;
}
<!DOCTYPE html>
<html>
<head>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?
family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/menu.js"></script>
<script src="https://use.fontawesome.com/53686df37f.js"></script>
<title>Joseph Kuzera</title>
</head>
<body>
<i class="fa fa-bars toggle_menu"></i>
</body>
</html>
推荐指数
解决办法
查看次数
更改按钮文本而不更改按钮图标
我有下一个按钮：
$('.change-button-text').click(function(){
$('.target-chooser').html('Edit target');
});<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button">
Choose target
<i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button">
Change button text
</button>如何在不丢失按钮图标的情况下更改文本？
推荐指数
解决办法
查看次数
是否可以在CSS内容中使用两个图标，一个在另一个
我有一个如下所示的 css 类
.fa-unsorted:before, .fa-sort:before {
content: '\e9c2';
margin-top: -10px;
color: #999999;
font-family: 'icomoon';
}
显示如下
我想要的也包括在内，\e9c1但它应该显示在下面\e9c2。
对于上下文，我使用的库具有提到的 css 类来显示排序图标。它使用 fa-sort，它在同一图标中同时具有向上和向下箭头。
但我使用的 icomoon 没有这种替代品。所以我需要用两个图标来显示排序。以下是我想要的
我尝试关注内容，但正如预期的那样，箭头显示在彼此旁边。
content: '\e9c2\e9c1';
添加另一个类会很好，但我无法控制 JS 来添加新类。
推荐指数
解决办法
查看次数
字体真棒 5 不起作用
当我遇到问题时，我决定是时候切换到 Font-awesome 5 了。我的图标没有显示。它向我展示了这一点。
我不明白问题发生在哪里。我按照他们网站上的每一步操作并正确链接了文件，但它们仍然不显示。这是该文件的屏幕截图。
是什么原因造成的？为什么不起作用？
推荐指数
解决办法
查看次数
字体文件被 CORS 策略阻止
我想构建一个由 CDN 提供商加速的服务器，为我的其他网站提供静态文件。我决定使用https://www.funfun.org.cn，然后例如https://www.funfun.org.cn/libs/font-awesome.min.css和https://www.funfun.org .cn/libs/octicons.min.css应该可以被其他网站使用。
但是，当我通过本地主机中的网站测试此服务器时，我看到以下错误：
例如，
从源“ https://localhost:3000 ”访问“ https://www.funfun.org.cn/libs/octicons.woff ”上的字体已被 CORS 策略阻止：无“Access-Control-Allow-Origin” ' 标头存在于所请求的资源上。因此，不允许访问来源“ https://localhost:3000 ”。
https://www.funfun.org.cn/fonts/fontawesome-webfont.woff2?v=4.4.0其他错误与和类似https://www.funfun.org.cn/libs/octicons.ttf，等等。
在我的网站中，上面的文件没有直接调用，我只有以下两行关于字体的内容，它们必须调用.ttf和.woff2等。
<link rel="stylesheet" href="https://www.funfun.org.cn/libs/font-awesome.min.css">
<link rel="stylesheet" href="https://www.funfun.org.cn/libs/octicons.min.css">
那么，有谁知道我可以做些什么来修复这些错误？
PS：我的nginx配置文件如下，所有文件都在 和/var/www/html/libs/下/var/www/html/fonts/。
server {
listen 443 ssl;
ssl_certificate /etc/nginx/cert/1530490648293.pem;
ssl_certificate_key /etc/nginx/cert/1530490648293.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_session_timeout 1d;
ssl_stapling on;
ssl_stapling_verify on;
add_header Strict-Transport-Security max-age=15768000;
root /var/www/html;
server_name funfun.org.cn www.funfun.org.cn;
location / …推荐指数
解决办法
查看次数
ng 类的字体很棒的行为
所以我的代码是 Angular 版本 5。
我有一个带有图标的按钮。我正在尝试使图标动态化。所以我想在发送图标fa fa-paper-plane和加载图标之间切换fa fa-spinner fa-spin。当我发送消息时，我应该显示旋转器，当我收到消息时，我应该显示纸飞机图标。
案例1）我fa一起给了fa-spinner，但fa-paper-plane没有用。
<div class="send">
<button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
<i [ngClass]="{ 'fa fa-spinner fa-spin': true, 'fa fa-paper-plane': false }" aria-hidden="true" title="send"></i>
</button>
</div>
这是下面的输出，我得到一个方形图标而不是旋转图标。
案例 2) 在这方面，我也给出了fa和fa-spinner fa-spinfa-paper-plane
<div class="send">
<button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
<i [ngClass]="{ 'fa fa-spinner fa-spin': false, 'fa fa-paper-plane': true }" aria-hidden="true" title="send"></i>
</button>
</div>
所以现在发生了这种情况。
现在你可以看到，在这两种情况之间，我刚刚交换了 true false 值。所以我得出的结论是，我的旋转器不工作。但这件事发生了，
情况 3 )我再次给出了fa和 …
推荐指数
解决办法
查看次数
WPF 图标旋转
基于这个答案我有两个问题：
- 标记的图标的名称是什么？
- 我怎样才能让它向另一个方向旋转，即像这样旋转：
我尝试添加FlowDirection="RightToLeft"如下内容：
<fa:ImageAwesome FlowDirection="RightToLeft" SpinDuration="6" Icon="Cog" Width="200" Height="200" Foreground="White" Spin="True" />
但它仍然向同一方向旋转
推荐指数
解决办法
查看次数
预加载密钥请求 LightHouse
我font-awesome在应用程序中使用图标angular。我检查了我的网络结果pagespeed。我遇到字体问题。
这是pagespeed结果。
它所说的用途<link rel=preload>，但问题是它..fonts/fontawesome-webfont.woff?v=4.7.0可以在FontAwesome的 css 文件中使用，那么我如何为此添加预加载呢？或者有什么解决方案可以修复它？
这是我的index.html，其中包含了font-awesomecdn。
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />
我认为这就是问题所在css。
@font-face {
font-family: 'FontAwesome';
src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
performance-testing lighthouse google-pagespeed font-awesome pagespeed-insights
推荐指数
解决办法
查看次数
Font Awesome unicode“\f046”在 Chrome 中不显示
我正在尝试在我的网页上使用 Font Awesome Unicode ( https://fontawesome.com/v4.7.0/icon/check-square-o )。
但它显示如下。
我花了很多时间在互联网上搜索 Unicode 在 Chrome 中不显示的原因。但仍然没有运气。
.myClass {
font-size: 45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f046";
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'>Hiiii</span>推荐指数
解决办法
查看次数