标签: font-awesome-5

我正在使用字体字体库显示解锁图标。

因此，默认情况下方向是朝正确的方向，我想将其更改为左边。

<i class="fas fa-unlock-alt"></i>

所以，有什么方法可以改变解锁图标的方向？

在以下示例中,初始图标呈现但在类更改时不会更改.

const Circle = ({ filled, onClick }) => {
  const className = filled ? 'fas fa-circle' : 'far fa-circle';
  
  return (
    <div onClick={onClick} >
      <i className={className} />
      <p>(class is {className})</p>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };
  
  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

使用 Font Awesome 的 JS 5 我想创建一个带有时钟和日历的简单堆叠图标。

<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>

<span class="fa-layers fa-4x">
    <i class="far fa-calendar-alt"></i> 
    <i class="far fa-clock" data-fa-transform="shrink-6 down-6 right-6"></i>
</span>

上面的片段或多或少是我所期望的，除了我希望时钟的“内部”填充为白色而不是透明的，所以我看不到日历。

更明确地说，这是预期的结果（一些糟糕的photoshoping......）

我有 Sencha ExtJS 6，但一些新的 FontAwesome 图标无法正常工作。我认为这是由于旧版本的 FontAwesome 造成的。然后我决定升级它并遵循本教程： https: //github.com/yamayamayamaji/extjs-package-fontawesome 其中说：

将 /ext(framework_dir)/packages/font-awesome/ 替换为 /font-awesome/

然后运行sencha应用程序刷新

但此后我看不到任何 FontAwesome 图标。

所以这：

{
    title: 'Dashboard',
    iconCls: 'fa-home',
    bind:
    {
        html: 'Test'
    }

},

现在看起来像这样：

有什么建议么？

顺便说一句，我在控制台中没有任何错误。

我想在我的 Xamarin.Forms 项目中添加很棒的字体，我已经将它添加到了项目中。然后我将 FontFamily 添加到这样的标签中：

<ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="15">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="9*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Text="&#xf11a;" FontSize="20">

                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Font Awesome 5 Free" />
                                        <On Platform="Android" Value="fa-regular-400.ttf#Font Awesome 5 Free Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>

                            </Label>
                            <Label Grid.Column="1" Text="{Binding Title}" FontSize="20"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

这段代码工作正常，这是结果

但是当我将这些硬编码的东西更改为这样的可绑定属性时：

<Label Grid.Column="0" Text="{Binding FontAwesomeIconText}" FontSize="20">

并在 c# 中这样设置

menuItems = new List<DrawerMenuItem>
            {
                new DrawerMenuItem {Id = MenuItemType.Browse, Title="Browse", FontAwesomeIconText = "&#xf11a;" },
                new DrawerMenuItem {Id …

我想在我的应用程序中显示 fontAwesome 图标。

我可以用这样的字符串类型图标显示：

<Text style={{fontFamily: 'fontAwesome'}}>&#xf0e8;</Text> 打印图标。运作良好。

但我需要用这样的变量显示图标：

let icon2 = "";
<Text style={{fontFamily: 'fontAwesome'}}>{icon}</Text>

然后打印到屏幕而不是图标。

我与您分享博览会小吃链接。你可以很容易地尝试这个。

https://snack.expo.io/@wyrustaaruz/Zm9udG

我使用 Typescript + ReactJS，并尝试在字体真棒图标中添加链接。我的代码是这样的：

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRandom } from '@fortawesome/free-solid-svg-icons'


const MiddleHeading = () => {
     return (
         <div id="middle_heading">  

              <FontAwesomeIcon icon={faRandom} size="2x"/>          

         </div>
     );
 };

 export default MiddleHeading;

关于如何向我的图标添加 URL 的任何想法？

谢谢你的帮助

我使用Hosting Font Awesome Yourself方法将 FA 打包为 Angular 7 小部件和 Web 应用程序的一部分。问题是他们解释说要打包整个/webfonts/文件夹，并且它包含每种格式的重复字体。

坚持一种格式（例如，svg忽略其他格式）不是更好吗？

仅采用一种特定格式的缺点/优点是什么（如果有）？

我为 Fontawesome 图标定义了一些样式，以将浏览器图标着色为相应的品牌颜色。所以Opera图标是红色，IE蓝色，Firefox橙色。

但是，由于 Chrome 有 4 种不同的颜色，而且分隔非常严苛，我想知道是否可以仅使用 CSS 来模仿接近于那种颜色的东西？

我所知道的最接近那里的是渐变，但显然它并没有接近看起来正确。

i.fa-chrome {
  font-size: 3rem;
  background-image: linear-gradient(to bottom right, yellow, limegreen, crimson, blue, blue);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="p-3">
  <i class="fa fab fa-chrome"></i>
</div>

是否可以通过一些背景剪辑和 CSS 技巧来做更多的事情，以更接近原始图标的视觉识别？

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<span class='fas fa-print' data-toggle='tooltip' data-placement='bottom' title='Print'>Printing</span>

在这段代码中,span有一个tooltip切换,当我将鼠标悬停在它上面时,

它告诉我,Bootstrap Tooltip然后Standard Tooltip直接显示它,b

他们两个都显示出来,究竟是什么问题？