font-awesome 相关问题

我在我的 Angular 应用程序中使用 Font Awesome，并且我试图在单击刷新图标时旋转它。我在 Angular 应用程序中使用 Font Awesome，并且尝试在单击刷新图标时旋转它。 <div class="col-5 d-flex justify-content-end"> <span class="mr-4 pr-3"> <fa-icon style="color: white; font-size: large; top: 0;" [icon]="faArrowAltCircleDown" (click)="refreshTaskList()"> </fa-icon> </span> </div> 我尝试添加rotate="360"以及transform="rotate-90"，但不幸的是都没有成功。我愿意接受建议。您只能使用 CSS 来实现此目的，不需要 Angular： button:focus i { animation: rotate 1s ease-in-out 0s; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button> 您可以使用上面的代码并将其转换，使其达到您想要的结果。来源：Angular Button 单击旋转图标相关问题（Temani Afif的评论）：Font Awesome 5 如何排列不同的图标？在 fa-icon 元素本身内部使用旋转属性。在你的情况下，它将是： <div class="col-5 d-flex justify-content-end"> <span class="mr-4 pr-3"> <fa-icon style="color: white; font-size: large; top: 0;" [icon]="faArrowAltCircleDown" (click)="refreshTaskList()" [rotate]="180"> </fa-icon> </span> </div> 参见： https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/usage/features.md#rotate

html css angular font-awesome

回答 2 投票 0

NG8001：“fa-icon”不是已知元素：升级到 Angular 18 后

从 Angular 17 升级到 Angular 18 后，引用 fa-icon 的现有代码不再起作用并产生： [错误] NG8001：“fa-icon”不是已知元素：我已经卸载并重新安装...

angular font-awesome

回答 1 投票 0

React Native FontAwesomeIcon 无法在 TouchableHighlight 或 Pressable 中工作

我无法将任何 Font-Awesome 图标放入 TouchableHighlights 或 Pressable 元素中。我无法将任何 Font-Awesome 图标放入 TouchableHighlights 或 Pressable 元素中。 <TouchableHighlight onPress={someOnPressMethod}> <FontAwesomeIcon icon={faPlus} color='white'/> </TouchableHighlight> 如果我这样做，则会出现以下错误： ERROR TypeError: Cannot read property 'color' of undefined This error is located at: in FontAwesomeIcon (created by Page) in RCTView (created by View) in View (created by TouchableHighlight) in TouchableHighlight (created by TouchableHighlight) in TouchableHighlight (created by Page) ... 我可以在 TouchableHighlight 之外添加图标就可以了。我感谢您的帮助！我想所有 FontAwesomeIcons 都必须放入 Text 元素中。如果我将图标包裹在文本元素周围，它就可以正常工作 <TouchableHighlight onPress={someOnPressMethod}> <Text><FontAwesomeIcon icon={faPlus} color='white'/></Text> </TouchableHighlight>

typescript react-native icons font-awesome

回答 1 投票 0

Angular + 动态加载的 Fontawesome 图标错误

我正在使用 Angular (8) 的官方 fontawesome 库，看起来我可以在静态命名图标时完美加载图标我正在使用 Angular (8) 的官方 fontawesome 库，当静态命名图标 <fa-icon [icon]="faSearch"></fa-icon> 时，我似乎可以完美地加载图标，但在动态加载与 <fa-icon [icon]="item.icon"></fa-icon> 中相同的属性时则不行，在其中我将收到以下控制台错误： ... FontAwesome: Could not find icon with iconName=faSearch and prefix=fas. This warning will become a hard error in 0.6.0. ... 这种情况发生在所有循环图标上，奇怪的是，它会将所有图标解释为来自“fas”（实体）库，尽管有些图标属于“far”（常规）库，因此错误始终显示“前缀” =fas”。我正在按照文档的建议实例化组件中的图标： import { fas, faSearch, faGlobeEurope } from "@fortawesome/free-solid-svg-icons"; import { far, faFilePdf, faFilePowerpoint, faFileWord, faFileExcel } from "@fortawesome/free-regular-svg-icons"; export class HomeComponent implements OnInit { constructor(...) { } far = far; fas = fas; faFilePdf = faFilePdf; faFilePowerpoint = faFilePowerpoint; faFileWord = faFileWord; faSearch = faSearch; faFolder = faFolder; faGlobeEurope = faGlobeEurope; faFileExcel = faFileExcel; ...} 我尝试了多种选项，但它们似乎无法解决这个问题。我像这样动态加载我的很棒的图标： parent.component.ts import { Component } from '@angular/core'; import { faTruck } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], }) export class HomeComponent { truckIcon = faTruck; constructor() {} } parent.component.html <div> <app-children [icon]="truckIcon"></app-home-card> </div> child.component.ts import { Component, Input } from '@angular/core'; import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; @Component({ selector: 'app-home-card', templateUrl: './home-card.component.html', styleUrls: ['./home-card.component.css'], }) export class HomeCardComponent { @Input() icon: IconDefinition | undefined; constructor() {} } child.component.html <div> <fa-icon [icon]="icon!"></fa-icon> </div> angular-fontawesome 支持动态渲染图标。看看文档我稍微调整了一下以满足我的需要： import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, Input, OnInit, ComponentRef, ComponentFactory } from '@angular/core'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-font-awesome-renderer', template: '<ng-container #host></ng-container>' }) export class FontAwesomeRendererComponent implements OnInit { @Input() icon: IconDefinition; @ViewChild('host', {read: ViewContainerRef, static: true }) container: ViewContainerRef; constructor(private cfr: ComponentFactoryResolver) { } ngOnInit(): void { this.createIcon(); } private createIcon(): void { const factory: ComponentFactory<FaIconComponent> = this.cfr.resolveComponentFactory(FaIconComponent); const componentRef: ComponentRef<FaIconComponent> = this.container.createComponent(factory); componentRef.instance.icon = this.icon; componentRef.instance.render(); } } 我已经用这种方式使用了动态fontawsome图标 home.component.ts @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], }) export class HomeComponent implements OnInit, OnDestroy { // Icons faCars = faCar; faToys = faGamepad; // Define array of Object const categories: Category[] = [ { name: 'Cars', icon: this.faCars, }, { name: 'Toys', icon: this.faGames, } ]; } 模态类 export class Category { name: string; icon: IconDefinition; } home.component.html <div *ngFor="let category of categories> <fa-icon [icon]="category.icon"></fa-icon> <span>{{category.name}}</span> </div> 这对我有用

angular font-awesome

回答 3 投票 0

将字体超棒的 CDN 与 Tampermonkey 结合使用

// ==用户脚本== // @name 名称 // @description 描述 // @作者你 // @版本0.1 // @match https://mysite* // @resource customCSS https://cdnjs.cloudflare.com/

javascript font-awesome tampermonkey userscripts

回答 1 投票 0

我正在尝试更改一个 fontawesome 图标（它会自动从带有 title 属性的元素切换到带有嵌套元素的元素），通过 ch... 我正在尝试通过更改结果上的类来更改 fontawesome 图标（它会自动从具有 <i> 属性的 title 元素切换到具有嵌套 <svg> 元素的 <title> 元素） <svg>元素。不过，我还需要更新嵌套的 <title> 元素，但我发现更改类将导致嵌套的 <title> 元素被删除。我应该如何更新 <title> 元素？我还可以补充一点，我没有使用任何模块，我只是使用来自 CDN 的 fontawesome 脚本： <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script> const getIconOuterHTML = () => { return new Promise((resolve) => { setTimeout(() => { const iconEl = document.querySelector('#commentIcon'); let output = $('<div>').text(iconEl.outerHTML).html(); //console.log(output); output = output.replaceAll('><', '>\n<'); resolve(output); }, 200); }); } $(document).ready(async () => { document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); $(document).on('click', '#switchIconBtn', async (ev) => { const iconEl = document.querySelector('#commentIcon'); const titleElId = iconEl.getAttribute('aria-labelledby'); const titleEl = iconEl.querySelector(`#${titleElId}`); if( iconEl.classList.contains('fa-comment-dots') ) { iconEl.classList.remove('fa-comment-dots'); iconEl.classList.add('fa-comment-medical'); if(titleEl !== null){ titleEl.textContent = 'add a comment'; } else { alert('could not find title element'); } } else { iconEl.classList.remove('fa-comment-medical'); iconEl.classList.add('fa-comment-dots'); if(titleEl !== null){ titleEl.textContent = 'edit comment'; } else { alert('could not find title element'); } } document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script> <i class="fas fa-comment-medical" title="add a comment" id="commentIcon"></i> <div><button id="switchIconBtn" style="margin-top: 15px;">Switch icon and title</button></div> <div>Resulting HTML:</div> <pre id="htmlRepresentation"></pre> 正如您在生成的 HTML 表示中看到的那样，单击更改图标类的按钮将导致 <title> 元素被删除。我应该如何更新标题？现在检查 const getIconOuterHTML = () => { return new Promise((resolve) => { setTimeout(() => { const iconEl = document.querySelector('#commentIcon'); let output = $('<div>').text(iconEl.outerHTML).html(); //console.log(output); output = output.replaceAll('><', '>\n<'); resolve(output); }, 200); }); } $(document).ready(async () => { document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); $(document).on('click', '#switchIconBtn', async (ev) => { const iconEl = document.querySelector('#commentIcon'); const titleElId = iconEl.getAttribute('aria-labelledby'); const titleEl = iconEl.querySelector(`#${titleElId}`); if( iconEl.classList.contains('fa-comment-dots') ) { iconEl.classList.remove('fa-comment-dots'); iconEl.classList.add('fa-comment-medical'); if(titleEl !== null){ titleEl.textContent = 'add a comment'; } else { alert('could not find title element'); } } else { iconEl.classList.remove('fa-comment-medical'); iconEl.classList.add('fa-comment-dots'); if(titleEl !== null){ titleEl.textContent = 'edit comment'; } else { alert('could not find title element'); } } // Manually update title const newTitle = document.createElement('title'); newTitle.textContent = titleEl.textContent; iconEl.querySelector('svg').appendChild(newTitle); document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/> <i class="fas fa-comment-medical" title="add a comment" id="commentIcon"></i> <div> <button id="switchIconBtn" style="margin-top: 15px;">Switch icon and title</button> </div> <div>Resulting HTML:</div> <pre id="htmlRepresentation"></pre>

javascript font-awesome

回答 1 投票 0

如何将 fontawesome 图标置于 div 元素中

我有一个宽度为180px的div；和高度：180px；。如何在容器内水平和垂直居中放置一个很棒的图标？注意：我还可以在图标下方添加文字我有一个带有 width: 180px; 和 height: 180px; 的 div。如何在容器内水平和垂直居中放置一个很棒的图标？注意：我也可以在图标下方添加文字 <div style="width:180px; height:180px; float:left;"> <i class="fa fa-search fa-4x"></i> </div> 应该看起来像这样：试试这个： .centered{ position:relative; top:50%; left:50%; transform:translate(-50%,-50%) } .container{ width:100px; height:100px; } 在移动设备上。你可以这样做 #search{ background: gray; width:180px; height:180px; float:left; line-height: 180px; text-align: center; vertical-align: bottom; } #search > p { margin-top: -155px; } 工作示例http://jsfiddle.net/kasperFranz/h91p8w4e/3/（在示例中使用 icon 代替 fa，但不应该影响结果。）我可能来得太晚了，但这是一个常见问题，所以这是一个简单的工作想法，它有趣的一面是它适应容器大小： span{ margin: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute; text-align: center; width: 15px; height: 15px; display: block; } 根据我的评论，这是一个JSFIDDLE 未设置 relative 或 absolute html <div class="myDiv"> <div class="content_wrapper">  <i class="icon-search icon-4x"></i><br /> <span class="myText">Search</span> </div> </div> CSS .myDiv{ width: 180px; height: 180px; float: left; background: #ccc; text-align: center; display: table; } .content_wrapper{ display: table-cell; vertical-align: middle; } .myText{ font-weight: bold; font-size: 20px; } CSS /* This parent can be any width and height */ .block { text-align: center; background:#ccc; margin-bottom:10px; } /* The ghost, nudged to maintain perfect centering */ .block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ .centered { display: inline-block; vertical-align: middle; width: 300px; } HTML <div class="block" style="height: 300px;"> <div class="centered"> <h1>Some text</h1> <p>p1</p> </div> </div> <div class="block" style="height: 200px;"> <div class="centered"> <h1>Some text</h1> <p>p2</p> </div> </div> <div class="block" style="height: 600px;"> <div class="centered"> <h1>Some text</h1> <p>p3</p> </div> </div> 演示更新1：演示只需将 display: grid; place-items: center; 添加到您的 div 即可开始使用。像这样： <div style="width:180px; height:180px; display: grid; place-items: center;"> <i class="las la-user-circle"></i> </div> 这里的大多数答案都没有达到OP的要求。如今解决这个问题最简单、最好的方法就是使用 Flexbox。还有其他方法。在下面的代码片段中，有 4 种可能的解决方案： :root { --parentWidth: 180px; --parentHeight: 180px; } .search { background: gray; width: 180px; height: 180px; } .fa-search { padding: 20px; border: 3px solid red; } /* Solution 1 */ .grid { display: grid; place-items: center; } /* Solution 2 */ .flex { display: flex; align-items: center; justify-content: center; } /* Solution 3 */ .calc-outer { width: var(--parentWidth, 180px); height: var(--parentHeight), 180px) } .calc-inner { position: relative; left: calc(var(--parentWidth) * .2); top: calc(var(--parentHeight) * .2); } /* Solution 4 */ .table-inner { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } <h1>Solution 1: Using Flexbox (recommended)</h1> <div class="search flex"> <i class="fa fa-search fa-4x"></i> </div> <hr> <h1>Solution 2: Using Gridbox</h1> <div class="search grid"> <i class="fa fa-search fa-4x"></i> </div> <hr> <h1>Solution 3: Using calc (not recommended)</h1> <div class="search calc-outer"> <i class="fa fa-search fa-4x calc-inner"></i> </div> <hr> <h1>Solution 4: Using transform (not recommended)</h1> <div class="search"> <i class="fa fa-search fa-4x table-inner"></i> </div> 如您所见，最后两个解决方案没有产生预期的结果。 Codepen：https://codepen.io/r-w-c/pen/YzbKbQd 我知道有点晚了，你可能已经明白了。我能够通过将图标和文本包装在 div 中然后添加填充来实现您正在寻找的内容。请参阅随附的笔。 http://codepen.io/ForTheJim/pen/YPxveR <p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>@ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script>

css font-awesome

回答 8 投票 0

Font Awesome 图标不会在 IE11 中打印

我们正在开发的项目是一个 Angular Web 应用程序。我正在尝试打印使用 FontAwesome 图标作为复选框和其他一些内容的内容列表。当我调用 $window.print() 时

css angularjs internet-explorer printing font-awesome

回答 2 投票 0

Jest 在 React Native 中给出了以下内容：“Jest 给出了以下内容：SyntaxError：意外的标记‘导出’”

在我的反应本机应用程序项目中，我尝试在登录页面屏幕上运行测试，仅测试其中元素的渲染。我得到什么：细节： C:\Users\Hp\OneDrive\Desktop 测试...

react-native jestjs babeljs font-awesome

回答 1 投票 0

如何在 Web 项目中使用 Font Awesome 图标？

我尝试使用将github图标插入到我的作品中，但没有显示。我该如何实现这一目标？请尽快帮助我，以便...

html css icons font-awesome

回答 1 投票 0

我怎样才能使用CSS给font Awesome一个边框

在我成功地将字体真棒链接链接到我的html后，我发现很难给字体真棒图标边框半径我尝试对图标进行分类并为其设置 50% 的边框半径，但它...

css icons font-awesome border-radius

回答 1 投票 0

[我怎样才能使用CSS给字体很棒的边框

在我成功地将字体真棒链接链接到我的html后，我发现很难给字体真棒图标边框半径我尝试对图标进行分类并为其设置 50% 的边框半径，但它...

css icons font-awesome border-radius

回答 1 投票 0

突然之间，CORS 政策禁止我使用 fontawesome

我有一个 fontawesome 帐户，在今天之前，我的标题中的包含代码始终有效： <p>我有一个 fontawesome 帐户，在今天之前，我的标题中包含的代码始终有效：</p> <pre><code><script src="https://kit.fontawesome.com/MYSPECIALCODE.js" crossorigin="anonymous"></script> </code></pre> <p>现在，即使我在本地主机上测试它，我也会收到此错误消息：</p> <pre><code>localhost/:1 Access to script at 'https://kit.fontawesome.com/MYSPECIALCODE.js' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. </code></pre> <p>（MYSPECIALCODE 是指 fontawesome 给我的包含在链接中的代码。）</p> <p>发生什么事了？我的项目明天上线。</p> </question> <answer tick="true" vote="1"> <p>Font Awesome Kit 服务已关闭。我们现在有同样的问题。 BenchApp 也是如此。</p> <p><a href="https://status.fortawesome.com/" rel="nofollow noreferrer">https://status.fortawesome.com/</a></p> </answer> </body></html>

font-awesome

回答 0 投票 0

带有 onclick 事件集的很棒的字体图标

我正在尝试使用以下很棒的字体图标作为我页面上列表中项目旁边的删除图标，如下所示：第 1 项删除图标第 2 项删除...

javascript jquery html css font-awesome

回答 5 投票 0

font-awesome 相关问题

最新问题