标签: font-awesome

覆盖@ font-face src URL？

我们正在使用FontAwesome和Bootstrap.但是,当我们尝试将FA与我们的自定义minifier一起使用时,它会尝试从相对路径加载字体,这会返回404,这是由于设置了缩小的URL结构的方式.

因此我们认为解决此问题的最佳方法是在我们的minify列表中添加一个额外的CSS文件,该文件将覆盖FontAwesome字体使用的@ font-face src URL.我们基本上只是从FontAwesome复制了@ font-face定义,并指定了绝对URL位置.

但是,现在发生的是我们正确的URL加载字体并尝试从FontAwesome CSS中最初指定的URL(导致与以前相同的404错误).

我们做错了什么,或者真的没有办法覆盖@ font-face src URL,以便完全忽略'upstream'定义？

css font-awesome

23
推荐指数

2
解决办法

1万
查看次数

字体真棒字体在IE8上显示为框

所以我在一个项目中使用Font Awesome,在测试中我遇到了IE8的问题.

在Windows IE9上,Chrome和Firefox正确显示字体(OS X上的Firefox,Chrome和Safari),但Windows上的IE8有一个问题,我得到一个方框代替字体.

在此输入图像描述

我的代码是:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" …

Run Code Online (Sandbox Code Playgroud)

css internet-explorer webfonts font-awesome

22
推荐指数

3
解决办法

4万
查看次数

如果字体下载被阻止,则从FontAwesome回退

我正在开发一个网页,发现FontAwesome是一种非常巧妙的方式来添加漂亮的图标,但默认情况下,Firefox 的NoScript插件会阻止字体下载.

对于普通字体,这不会是一个问题,但FontAwesome使用的unicode字符故意超出大多数字体的常规可打印范围,因此将字体堆栈添加到CSS(EG :) font-family: FontAwesome, sans-serif;将无法正常工作,因为所有图标都呈现为十六进制-squares.

我意识到我可以调整NoScript以允许字体下载,但这不是所有用户的理想解决方案 - 我宁愿页面优雅地降级.

当然,使用Javascript/jQuery很容易做到这一点,但当然如果NoScript正在进行阻塞也没有任何帮助,如果用户没有启用javascript,则测试失败.

理想的是有一些CSS样式/规则作为任何FontAwesome对象的后备,用一些基本字符替换它们甚至不显示任何东西.

对于那些不熟悉FontAwesome/TL的人; DR:

所有FontAwesome图标都有CSS类"fa":

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

Run Code Online (Sandbox Code Playgroud)

FontAwesome加载这样的自定义字体(我删除了

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
}

Run Code Online (Sandbox Code Playgroud)

然后一个特定的FontAwesome图标将有自己的特定类,插入相关的unicode字符,例如:

.fa-star:before {
    content: "?";
}

Run Code Online (Sandbox Code Playgroud)

图标的HTML将如下所示:

<i class="fa fa-star"></i>

Run Code Online (Sandbox Code Playgroud)

所以这里的问题是: 如果未加载字体"FontAwesome",我们需要某种方式,最好是在CSS中,用CSS类"fa"替换,删除或隐藏项目的内容.

html javascript css font-awesome

22
推荐指数

2
解决办法

1万
查看次数

字体真棒和i3bar

我想在我的i3bar上添加fontawesome图标.我通过yaourt安装了包"ttf-font-awesome"并将必要的unicode字符添加到我的i3status配置中,并将字体pango作为"FontAwesome"添加到我的i3bar配置中.图标应该显示,但所有显示的都是unicode字符.是否有我需要安装的特定包或是否我不正确地编辑了配置？

linux unicode fonts font-awesome

22
推荐指数

2
解决办法

4万
查看次数

Font Awesome Icons在某些浏览器中不起作用

我正在使用Bootstrap + Font Awesome,大多数桌面和移动浏览器都可以,但Font awesome图标不适用于Opera Mobile,Opera Mini和某些版本的Android Browser等浏览器.仅显示空白矩形.

有谁知道这个问题？而且,有解决方案吗？

谢谢

[编辑2013-03-06!重要] 我找不到任何明显的问题,所以我尝试了闻所未闻的解决方案.我试过两个在线字体转换工具.首先,我使用http://www.freefontconverter.com/将原始FontAwesome svg转换为ttf.然后我使用http://www.font2web.com/将.ttf转换为.eot,.woof anf .otf.

结果:opera mobile现在可以正常显示图标.(我不知道是什么变化,但有效)

现在的问题是Blackberry 6.我用BB Curve 9300,Modernizr和Google字体测试了@ font-face,一切都还可以.但FontAwesome仍然不起作用......

[编辑2013-03-01] Opera mobile 10+支持@ font-face,因此问题可能是另一个问题.我尝试使用@ font-face的另一种服务器字体并且工作正常,但是使用FontAwesome我无法正确显示图标.

在此输入图像描述

[编辑2013-03-03]问题不只是我的网站,字体真棒网站的例子和测试不起作用...

在此输入图像描述

[编辑2013-03-4] 我试图使用Modernizr"font-face"功能检测进行后备,但Opera mobile和BlackBerry 6返回true,因为它们支持该功能. 如何检测FontAwesome字体是否已加载？

blackberry css3 opera-mobile twitter-bootstrap font-awesome

21
推荐指数

2
解决办法

5万
查看次数

FontAwesome不会在Firefox中显示

相关问题在这里.

鲍里斯对上述问题的回答似乎有道理,但我在我的服务器上安装了Font Awesome文件,问题仍然存在:

在此输入图像描述

我查看了库,发现字体文件包含在安装中,因此关于跨服务器访问字体的参数似乎不起作用.我不介意使用BootstrapCDN,但Boris的建议似乎适用,我不知道如何发送正确的CORS标头.(我尝试过,但它也不起作用.)任何想法如何解决这个问题,使用"Bootstrap CDN"还是"默认CSS"？(另见这些说明.)

PS:IE10正确显示字形.

firefox font-awesome

21
推荐指数

1
解决办法

5万
查看次数

带有onclick事件集的Font-Awesome图标

我正在尝试使用以下font-awesome图标

<i class="fa fa-minus-circle"></i>

Run Code Online (Sandbox Code Playgroud)

作为我页面上列表中项目旁边的删除图标,如下所示:

Item 1  delete-icon
Item 2  delete-icon

Run Code Online (Sandbox Code Playgroud)

点击其中一个图标我需要运行一个JavaScript函数...

我应该用什么html元素包装图标？我注意到当我使用锚标签时它变成蓝色,当我使用按钮时它最终被包裹在一个按钮中.还有其他选择吗？

基本上我想这样做

<a onclick="Remove()"><i class="fa fa-minus-circle"></i></a>

Run Code Online (Sandbox Code Playgroud)

或这个

<button onclick="Remove()"><i class="fa fa-minus-circle"></i></button>

Run Code Online (Sandbox Code Playgroud)

但只有图标显示为没有修改.没有蓝色,没有包裹在按钮内.

html javascript css jquery font-awesome

21
推荐指数

2
解决办法

6万
查看次数

字体真棒百分比宽度堆积图标

我想用CSS实现以下效果:

这个星形图标是一种字体.我想用百分比来定义橙色背景的宽度,所以50%应该是恒星的完美一半.

现在,我做了以下事情:

<div class="container">
    <span class="star star-under fa fa-star"></span>
    <span class="star star-over fa fa-star"></span>
</div>

Run Code Online (Sandbox Code Playgroud)

和:

.container
{
    font-size: 200px;
    height: 300px;
    position: relative;
    width: 100%;
}

.star
{
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}

.star-under
{
    color: #ddd;
}

.star-over
{
    color: #f80;
    overflow: hidden;
    width: 30%;
}

Run Code Online (Sandbox Code Playgroud)

问题是我需要提供宽度和高度才能使用%的宽度.如果我跳过容器的宽度和高度,它什么都不显示,因为它包含绝对定位的子项.

这个%值是在服务器端计算的,所以我宁愿保持内联,如下所示:

<span class="star star-over fa fa-star" style="width: 62%;"></span>

Run Code Online (Sandbox Code Playgroud)

最灵活的方法是什么？最灵活的我指的是没有必要提供任何宽度和高度的那个.

html css css3 font-awesome

21
推荐指数

1
解决办法

1898
查看次数

fontawesome的升级过程从4到5

我们为font-awesome 5(yea)做出了贡献,我们正在从现有的图标(符号集)转变为字体 - 真棒.图标的命名和font-awesome 5的使用是否会向后兼容font-awesome 4.7？

IE: Should we go to 4.7 now, and have very easy upgrade to 5.0? OR should we hold off until font-awesome 5 comes out?

upgrade font-awesome font-awesome-5

21
推荐指数

2
解决办法

8222
查看次数

字体真棒5捆绑通过NPM

我试图通过webpack仅捆绑所需的Font Awesome 5图标,但DOM中的图标不会被替换.

我已从文档中添加了所有必需的包:

yarn add -D @fortawesome/fontawesome
yarn add -D @fortawesome/fontawesome-pro-solid
yarn add -D @fortawesome/fontawesome-pro-regular
yarn add -D @fortawesome/fontawesome-free-brands

Run Code Online (Sandbox Code Playgroud)

包括以下自定义JS:

"use strict";

import fontawesome from '@fortawesome/fontawesome';
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';

fontawesome.icon(faCheck);

function iconsDoneRendering () {
    console.log('Icons have rendered'); // No output in console
}

fontawesome.dom.i2svg({ 
    callback: iconsDoneRendering,
})

Run Code Online (Sandbox Code Playgroud)

HTML模板:

<head>
    <link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
</head>
<body>
    <ul class="fa-ul">
        <li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
        <li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
    </ul>
    <script src="/js/app.js?v2.1.4"></script>
</body> …

Run Code Online (Sandbox Code Playgroud)

npm font-awesome webpack font-awesome-5

21
推荐指数

2
解决办法

2万
查看次数

标签统计

font-awesome ×10

css ×5

html ×3

css3 ×2

font-awesome-5 ×2

internet-explorer ×1

npm ×1

opera-mobile ×1

twitter-bootstrap ×1

«
1
…
8
9
10
11
12
…
98
»