font-awesome

问题 I want to bind the click event on a font awesome icon. Yet the icon itself is not clickable, only when I insert additional text, that text becomes bound. How do I bind the icon itself? <span class="icon-star"> only this text is clickable, the icon itself is not </span> <script type="text/javascript"> (function($) { $('span.icon-star').on('click', function() { console.log($(this)); }); })(jQuery); </script> 回答1: As discussed above, giving the span a block or inline-block layout will fix the

问题 I'm trying to create a link that is represented by an icon (I'm using font-awesome for icons) and some text. If the text wraps down to the next line I want it in line with the text, rather than appearing under the icon. I've tried a solution I found in this answer and it seems to work fine for me <a> <i class="fa fa-exclamation-circle"></i> <p>Text of the link</p> </a> i { float: left; } p { overflow: hidden; } However, in Eclipse where I'm representing this (in a JSP page) it throws a

问题 I have a project where we use font awesome 5 library. I followed the instructions that are written here and added an .npmrc file with my auth token. Is this a safe behaviour to put this in a repo? I want the devs to have access to it, but if the repo goes public we might be exposing the token. What is the best practice in situation like this? 回答1: It is definitely NOT a safe behavior to put the token in any git checked file, including .npmrc. Below are the steps your team can take to safely

问题 I'm trying to use jquery mobile with font awesome buttons, to do so, I followed the answer described in this post. However, when I try to use icons in my buttons, the class ui-icon-fa has display: inline-block and the button is not full width now. How can I fix this issue? 回答1: Instead of creating a bunch of classes as in the referred post, I would use the standard <i class="fa fa-camera-retro"></i> and just place it correctly with some CSS: <button class="ui-btn ui-btn-fa"><i class="fa fa

问题 I am trying to use icon font FontAwesome in Nativescript application, which is possible according to this article https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon I did everything that is described in that article: Added .ttf in app/fonts Added class in app.css .fa{ font-family: "FontAwesome"; } Used it in XML like so text="" class="fa" But result is rather disappointing: I also tried the "\uf230" syntax, but that renders as plain text.

问题 When I enabled data-search-pseudo-elements it causes a 100x+ slowdown in the performance of rendering rows with icons within a grid. Whats strange is that the grid virtualizes the rows, so really only 100 rows may be visible. Without this setting render time is .5 seconds. With this setting it is >30 seconds and often crashes the browser altogether. The icons in question aren't from pseudo elements, but I enabled this feature in my index.html for a targeted use in another part of the app. Is

问题 This may be an obvious question for those of you more advanced in coding than myself...but I created a website in WordPress but their domain is hosted elsewhere. They changed the A name and it now points to the site, but the font awesome icons are now square boxes. How can I fix this? Is there a simple way? Many thanks for any help/guidance. Alison 回答1: This is the easiest one. All you have to do is add this single line of code in your theme’s header.php file just before the tag. <link rel=

问题 I am using a font awesome "x" icon - but it has a white background - can font-awesome backgrounds be transparent? The reason is, I want to display it over an image. What option do I need to do this? Current Code is: <i class="fa fa-times fa- m-n"></i> 回答1: Yes, font awesome uses the ::before psuedo for its icons, so simply do, e.g.: Demo Fiddle i::before{ background:transparent; } That said, you will likely want to use more specificity than simply i , e.g.: i[class*=fa-times]::before{

问题 I'm building a React application that will require font-awesome CSS to be imported, but I'm getting an error saying that the module cannot parse the woff2 files. Below is my code: import React from 'react'; import ReactDOM from 'react-dom'; require('css!../node_modules/bootstrap/dist/css/bootstrap.css') require('css!../node_modules/font-awesome/css/font-awesome.css') import '../node_modules/bootstrap/dist/js/bootstrap.js' import Dashboard from './components/Dashboard/Dashboard'; ReactDOM

问题 I used Yeoman to scaffold my project and Bower to install Font Awesome. I added $fa-font-path: "../bower_components/font-awesome/fonts/"; @import "../bower_components/font-awesome/scss/font-awesome"; to app/styles/style.css The fonts showed during development but not in the deployed stage where I used grunt dist to pack my files for deployment. I could see the font-awesome URLs in my dist/styles/59268e94.main.css were pointing to /bower_components/font-awesome/fonts/ whereas Bootsrap's