标签: font-awesome

我刚发现字体很棒,我想在我的网站上使用它.

问题是,我希望我的字体用渐变着色.我发现这个代码适用于标准文本,但我无法使用Font Awesome中的图标

这是我测试的:

<style>
    .big-icon {
        font-size: 72px;
        background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>

<span class="big-icon">
    Hello world
</span>
<i class="icon-beaker"></i>
<span class="big-icon">
    <i class="icon-beaker"></i>
</span>

它显示了一个带有渐变的"Hello world",我想要的图标,然后没有...

任何人都有任何想法？

谢谢

基于Font Awesome 文档,我创建了这个图标:

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

这段代码创建了这个html:

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x">::before</i>
  <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>

它是一个堆叠的旗帜图标.我想在Hover事件上更改图标颜色,我尝试了所有这些:

.fa-stack:hover{
color: red
}
.fa-stack i:hover{
color: red
}
.fa-stack i before:hover{
color: red
}

但没有工作.

经过广泛的研究并到达谷歌的终点,我仍然无法找到Bootstrap和Font Awesome的"最新"链接.

我知道有一个关于jQuery的"最新"版本的CDN链接,但我想知道是否还存在Bootstrap和Font Awesome？

我有一个关于React的项目,我需要将FontAwesome集成到它.我找到了官方图书馆并按照自述文件的说明安装了它

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

当我尝试在我的代码中使用它时,如下所示:

<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

我在控制台上收到此错误:

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

我试图将FontAwesome css链接包含在头部,但它没有帮助.我在用npm v4.6.1; node v8.9.1; react v16.2.

Fontawesome有一个很棒的星级css扩展,看起来非常棒.

但是,点击任何span元素都不会真正做任何事情.我不知道如何将其与我的数据库模型联系起来.假设我在Django中有一个0-5的整数字段.如何根据模板中用户的选择设置值？

<span class="rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</span>

如何防止在fontawesome图标和此图标附近的文本之间插入换行符？

看到小提琴,我有一个,但它被丢弃了.

在下面的示例中,我不希望在图标和单词"first"之间出现换行,但它可以出现在"first"和"second"之间.但它不起作用,请看小提琴.

  <i class="fa fa-search"></i>&nbsp;first second

它与这个问题有关,但我似乎无法使其发挥作用:

将字体图标附加到文本字符串中的最后一个单词并防止换行

不知道我怎么能这样做,因为BS 4不支持glyphicons.我是将其设置为背景还是将不同的定位应用于字体真棒图标？

到目前为止这是我的代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="form-group col-md-4">
  <input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->

我想使用这个字体很棒的图标.我也尝试过添加它background-image,如:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

但这没有任何作用.我能想到的唯一方法是添加font-awesome图标,然后将定位设置为绝对,对吧？但我不确定这是否是"干净"和正确的方法呢？我需要采取不同的方法吗？有人帮忙!谢谢!

我在rails 3应用程序中使用font-awesome,在开发模式下一切正常,但是当我推送到Heroku时,Firefox无法呈现图标,相反,我看到了:

• Chrome在开发和制作中使图标很好
• 这只会影响FireFox(虽然我没试过IE)
• 该应用程序在这里,如果有人能够确认这不仅仅发生在我的机器上(以帮助我排除本地主机缓存问题),我将不胜感激.
• 所有资产(包括字体和样式表)都使用asset_sync gem 托管在S3上.

这就是我所做的:

将以下内容添加到font-awesome.css.scss的顶部:**

// font-awesome.css.scss
@font-face {
  font-family: 'FontAwesome';
  src: font-url("fontawesome-webfont.eot");
  src: font-url("fontawesome-webfont.eot?#iefix") format("eot"),
       font-url("fontawesome-webfont.woff") format("woff"),
       font-url("fontawesome-webfont.ttf") format("truetype"),
       font-url("fontawesome-webfont.svg#FontAwesome") format("svg");
  font-weight: normal;
  font-style: normal;
}

然后我把它放在application.rb中:

# application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )

最后我将所有4个字体文件放入app/assets/fonts.

我真的很想知道我在这里做错了什么.

我正在使用Font Awesome在我的网站上创建图标,虽然它们在带有Retina显示屏的iPod Touch上看起来很棒,但在我的iMac上,它们看起来有点模糊,而且定义较少.

这是一张展示的图片:

正如您所看到的,Retina Display iPod Touch上的字体看起来非常漂亮和脆弱,但在iMac上,它有点蹩脚.

是什么造成的？这与抗锯齿有关吗？我可以做些什么吗？

我正在使用Font Awesome 4.0.0,并希望在LESS中执行类似的操作:

.btn-github {
  .btn;
  .btn-primary;
  margin-left: 3em;

  i {
    .@{fa-css-prefix};
    .@{fa-css-prefix}-github;
    .@{fa-css-prefix}-lg;
    margin-right: 1em;
  }
}

这不会编译错误:

ParseError: Unrecognised input in - on line ...

有可能做到这一点吗？它肯定会为我做一个漂亮的按钮.