标签: font-awesome
字体真棒不在Firefox中工作
我正在使用bootstrap,我通过Less添加了字体真棒,覆盖了Glyphicons.图标在Chrome中显示OK但在Firefox中我只看到框.
这就是我的目录的样子
-- Project
-- js
-- css
-- less
-- font-awesome
-- css
-- font
-- less
我在Project > less > boostrap.less文件中修改的所有内容都是:
@import "sprites.less";
//for this line
@import "../font-awesome/less/font-awesome.less";
正如我在Chrome中说的那样工作正常,但由于某种原因Firefox只显示了盒子.
推荐指数
解决办法
查看次数
是否可以在悬停时在两个奇特的图标之间进行更改？
我有一个带有font-awesome图标的锚标记,如下所示
<a href="#" class="lock"><i class="icon-unlock"></i></a>
是否可以在悬停到其他图标时更改为图标？
我的CSS
.lock:hover{color:red}
除了图标变红外,我还想将图标更改为以下内容
<i class="icon-lock"></i>
没有JavaScript的帮助,这可能吗？或者我是否需要在悬停时使用Javascript/Jquery？
谢谢.
推荐指数
解决办法
查看次数
Leaflet Awesome-Markers(添加数字)
我现在用的是Leaflet.Awesome标志物与插件LeafletJS.
我已经正确实现了它,但是现在我希望能够使用0到9之间的数字来表示标记.
这是一个JS Fiddle实现,用于展示插件的行为方式.
http://jsfiddle.net/fulvio/VPzu4/200/
该插件允许使用字体 - 真棒图标和字形图标(当然,不提供任何0 - 9数字作为图标.唉!)
- http://getbootstrap.com/components/#glyphicons
- http://fortawesome.github.io/Font-Awesome/cheatsheet/
文档提到了使用的能力extraClasses,我想知道是否有人能指出我正确的方向,如何利用这个来显示数字而不是图标或是否只是另一种方法来实现这一点.
在此先感谢您的帮助.
更新:
感谢@Can的评论.
awesome-markers的作者得到了另一棵树,在那里他准确地添加了你正在寻找的数字/字母的真棒标记,一定要抓住未经证实的JS.
推荐指数
解决办法
查看次数
想要使字体真棒图标更薄
我正在使用字体真棒图标,但问题是他们有默认的字体重量.我希望它更薄一些.但它不起作用
我的HTML代码
<span class="fa-stack fa-lg fa-5x color-red">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-trophy"></i>
</span>
我的css代码
.fa-trophy{
font-weight:lighter;
}
推荐指数
解决办法
查看次数
使用FontAwesome时,Flexbox大小调整无法正常工作
我正在面对我的页面布局的flexbox非常奇怪的行为.我正在使用FontAwesome来呈现某些符号.
基本上,我在另一个flexbox项目中有2个flexbox项目,这些子项目比父项目更宽.
1)我有一个.content__header对象,它在另一系列flexbox对象中呈现为flexbox对象.
2)该.content__header对象包含2个子对象:.breadcrumb和.page_tools.这些子对象也呈现为flex项.
3)在.breadcrumb对象内部,我有一些span对象(.breadcrumb__test),其内容被FontAwesome图标替换.使用::after伪元素的绝对定位来完成替换.
4)当我删除所有.breadcrumb__textHTML元素或.breadcrumb__text::after从样式表中删除定义时 - 定义了FontAwesome字体的使用 - 子对象(.breadcrumb和.page_tools)以正确的宽度呈现.所以我猜它与FontAwesome图标的替换有关.
.breadcrumb__text::after {
font-family: "FontAwesome";
font-weight: 400;
}
问题的视觉表示
绿线表示父宽度与实际内容之间的差异.
Code&Fiddle如下.
浏览器:谷歌浏览器47.0.2526.106米
小提琴:
https://jsfiddle.net/44gymmw2/6/
更新
当我text-indent: 100%;从.breadcrumb__textCSS定义中删除时,.breadcrumb按预期呈现.但是,当我离开text-indent原位并删除.breadcrumb__text::after样式表顶部的定义(如上所述)时,它也会正确呈现.
这个问题可能与FontAwesome或text-indentflexbox有关吗？
码
HTML
<body>
<div class="layout_wrapper">
<div class="layout_container__content">
<div class="content">
<header class="content__header"> …推荐指数
解决办法
查看次数
`fa-fw`课程的目的是什么？
通过fontawesome网站上的示例,我注意到一些人使用了这个类fa-fw.例如:
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
我有没有试过,我看不出任何显着的差异.
这fa-fw堂课的目的是什么？
推荐指数
解决办法
查看次数
Font Awesome在CSS中直接使用时显示正方形而不是图标
我试图span直接从CSS页面更改带有Font Awesome图标的a的内容,但似乎无法使其正常工作.
1)我从文档中导入了FA <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2)我的HTML看起来像这样:
<span class='myClass'>Movies</span>
3)现在让我说我想直接从CSS页面用图标更改跨度的内容.
我的css目前看起来像这样,但它不起作用,它给了我一个正方形而不是图标.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>有趣的是,它看起来像是在使用一些图标.如果我测试content: '\f007';它的工作原理.知道为什么吗？
(如果你想知道我为什么要直接在CSS中更改图标,那是因为我正在使用媒体查询,所以我不能直接在HTML页面中添加它)
推荐指数
解决办法
查看次数
如何使用webjars.org上的Font Awesome和JSF
我试图在我的JSF应用程序中使用Font Awesome图标.我按照入门说明并将以下内容添加到我的视图部分,取得了一些成功<h:head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet" />
当我使用这个icon-home类时,这给了我一个很好的主页图标:
但是,我不想依赖引导服务器来提供Font Awesome资源,所以我试图将这些与我的战争捆绑在一起,并配置我的视图以使用捆绑的资源.
我正在使用webjars项目创建的预制JAR.我的pom具有以下依赖性:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>3.2.1</version>
</dependency>
这将JAR放在我的WAR的WEB-INF/lib目录中.JAR结构的相关部分是:
META-INF
- MANIFEST.MF
+ maven
- resources
- webjars
- font-awesome
- 3.2.1
- css
- font-awesome.css
- *other css files*
- font
- *font files*
我尝试了以下方法在我的项目中包含图标:
<h:outputStylesheet library="webjars"
name="font-awesome/3.2.1/css/font-awesome.css" />
但是,这会将以前工作的主页图标呈现为:
我的浏览器(Chrome)在控制台中显示以下错误(域/端口/上下文根已更改以保护无辜;):
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found)
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found)
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)
所以看起来虽然正确解析了css文件,但是找不到包含css文件引用的字体的文件.我已在css文件中检查了这些引用,它们是:
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: …推荐指数
解决办法
查看次数
如何在WPF中使用icon [Font-awesome]
我是WPF的新手.我想在文本框和按钮中使用Font-awesome Icon.但图标未与我的文本框绑定
我将Font-awesome资源安装到我的应用程序中.
让我知道如何使用它的方式
谢谢,
我真的需要它请帮帮我..
第1步:下载Font-Awesome
工具 - >库包管理器 - >包管理器控制台安装
PM> Install-Package FontAwesome.WPF
第2步:添加资源
<Application> xmlns:fa="http://schemas.fontawesome.io/icons/" </Application>
第3步:放入App.xaml
<Application.Resources>
<Style x:Key="FontAwesome">
<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome" />
</Style>
</Application.Resources>
第4步:在Demo.xaml中使用它
<TextBlock Style="{StaticResource FontAwesome}"
FontSize="75"
Text="" />
第5步: - 输出
推荐指数
解决办法
查看次数
react-fontawesome不显示图标
我正在尝试使用react-fontawesome并在我看来与自述文件完全相同的地方实现它:https://github.com/danawoodman/react-fontawesome/blob/master/readme.md
import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
render() {
return (
<div>
<div>
<span>
<FontAwesome
className='super-crazy-colors'
name='rocket'
size='2x'
spin
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
SOME TEXT
</span>
</div>
...
</div>
)
}
}
但我没有在DOM中看到一个图标.虽然我确实在Chrome开发工具中看到了:
<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>
我觉得应该是一个<i>标签.我试图改变<span>...</span>一个<i>...</i>在开发工具中的"编辑为HTML"和图标仍然没有显示.
我在我的插件中添加了模块导出,在我的webpack.config中的预设中添加了stage-2.
谁能告诉我,如果我错过了什么？除了react-fontawesome之外,我还需要一些其他软件包吗？我是否需要导入标准字体-awesome.css或加载字体真棒CDN？任何帮助将不胜感激,谢谢!
推荐指数
解决办法
查看次数
标签 统计
font-awesome ×10
css ×5
html ×4
javascript ×2
dictionary ×1
firefox ×1
flexbox ×1
jsf ×1
leaflet ×1
less ×1
markers ×1
maven ×1
reactjs ×1
webjars ×1
wpf ×1
wpf-controls ×1