Questions tagged [font-awesome]

1

votes
1

answer
283

Views

How to set color of a part of CSS3 shapes or icons (Font Awesome etc.)?

I want to make a part of shape different color using CSS or Javascript. For example; I want to change green level programmatically.
Samed
1

votes
1

answer
36

Views

How to center `<span>` font awesome icons vertically with one another

I have multiple font awesome icons that I want to align vertically, as so ############################# icon icon icon icon icon icon ############################# I have already tried using vertical-align: middle This is what I have tried based on comments but no luck .info{ display: flex; align-i...
d1596
-1

votes
0

answer
11

Views

boostrap 4 card footer does not display properly (using flex)

I have this card footer : The problem is that it does not display properly on iphone 7 (using chrome on it). I have this display on the iphone : What is weird is that it shows correctly on chrome desktop using the 'toggle device toolbar' (to see a preview of the card on iphone 7, but on the desktop...
zskiredj
1

votes
4

answer
7.8k

Views

why some of the font-awesome icons does not show

I am using font-awesome with Angular 5 for my UI. Since I am using sass, I added the following line in .angular-cli.json after installing font-awesome 'styles': [ '../node_modules/font-awesome/scss/font-awesome.scss', '../node_modules/bootstrap/scss/bootstrap.scss', 'styles.scss' ], Some of the icon...
ddd
1

votes
3

answer
2.6k

Views

Font Awesome Icons in material-ui Button

I want to use the fontawesome icons in my material-ui Button component. But I couldn't do that. Do you know why? ( I'm using React and react-admin framework. ) import '../../../node_modules/font-awesome/css/font-awesome.min.css'; import Button from '@material-ui/core/Button'; .... this.codeGenerate(...
Cansel Muti
1

votes
4

answer
1.4k

Views

How to put the number at top right corner of cart icon?

I would like to place a number at top right corner of the font awesome cart icon. I have created this simple html.  5 The result is as follows. How can i make the number appear the top right corner of the cart icon as shown in the following image? I appreciate any help from css experts. Thanks...
kofhearts
1

votes
1

answer
868

Views

Bootbox and Font awesome icon in button

I'm using bootbox plugin for bootstrap modals. I would like to know how to put an F.A. icon inside a bootbox dialog button. This is my code: bootbox.dialog({ className: 'modal-danger nonumpad', closeButton: false, animate: false, title: '...', message: '...', onEscape: null, buttons: { refresh: { la...
Tobia
1

votes
1

answer
1.5k

Views

Font-Awesome Icon not resizing

I have 3 font-awesome icons side-by-side in a dev tag. On mobile there were a bit too small. I put this in my code but this specific icon doesn't change size? and here's how they look: css: hover-info .fa .fa-heart { font-size: 2em; }
Taylor Gagne
1

votes
2

answer
1.6k

Views

Sass::SyntaxError: Undefined variable: “$fa-css-prefix”

I am trying to integrate the present theme in my rails app. After intgerating when I run rake assets:precompile --trace I get the following error. ** Invoke assets:precompile (first_time) ** Invoke assets:environment (first_time) ** Execute assets:environment ** Invoke environment (first_time) ** E...
techdreams
1

votes
1

answer
400

Views

Why isn't my Animate.css working?

I got a piece of code from this website (github): https://daneden.github.io/animate.css/. So this gives CSS code for CSS animations, and I decided to take the SlideInDown animation. I put this in my CSS code, except it isn't working: what I am trying to move is a icon from Font Awesome: https://for...
FlipFloop
1

votes
2

answer
34

Views

Why are there 6 files in the fonts folder?

So the fonts folder of the FontAwesome distribution contains 6 different files. fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.ttf fontawesome-webfont.woff fontawesome-webfont.woff2 FontAwesome.otf Why? Do I need all of them? I don't see anything obvious on the FontAwesome readm...
Mud
1

votes
1

answer
601

Views

Display font awesome icons before text

I want to add a like icon/button before the word 'Like' , I tried font awesome but the 'i' tag will only display the text 'Like' in Italic. Although the snippet works here, but it wouldn't work when I write it on my editor, I tried it with both IE and Chrome, still not working this is the link I us...
Mohamed Hegazy
1

votes
1

answer
243

Views

Red square rendering instead of the AwesomeFont Icon

I was following this github : https://github.com/corymsmith/react-native-icons to learn how to put some icon on my app ! So i did all they said : -include in android/setting.gradleand android/app/build.gradle the differents parts of code. -do the register module (in MainActivity.java), the import in...
Mayoul
1

votes
1

answer
93

Views

Awesome font instead of image in url

Well, I have this kind of url and want to change the facebook png image with awesome font icon code How to do this here in top blue header my site ?!
Merkucio
1

votes
2

answer
531

Views

How to addClass and removeClass to child element when aria true or false?

I'm using the dropdown button by Zurb Foundation 5 with font awesome and the idea is to rotate the font when the menu is visible, and rotate it back once its hidden. Zurb foundation 5 does not use class open on the element so hasClass doesn't work, instead it uses Aria and since hasAria doesn't exis...
Simon Hayter
1

votes
2

answer
1k

Views

Include html text inside a Drupal 8 generated link

I have a hard time to style a link via the Drupal 8 render structure. This link needs to be displayed in my custom module: $add_link = \Drupal::l('' . t('Add new project'), $url); So between de tags I want a Font awesome icon in front of the text. But Drupal print all html out as readable text. I a...
user3411864
1

votes
3

answer
2.2k

Views

Font awesome icon placed top right corner of input within table

I'd like an icon placed on top right hand corner of my input. The input is inside a table column (https://jsfiddle.net/3zLzfz04/) What's the best way of doing this? Sample code with input styled: HTML: .inpHours{ font-weight: 500; text-align: right; font-size: 14px; border-style: solid; bord...
x5-452
1

votes
2

answer
3k

Views

Font-awesome not displaying properly in Chrome

My fonts-awesome fonts are working in Chrome (Version 51.0.2704.103), but not working in Safari (Version 9.1). When accessing my application on Chrome I receive this error and the icons don’t display properly Font from origin 'http://[::1]' has been blocked from loading by Cross- Origin Resource...
Amous
1

votes
3

answer
1k

Views

Polymer 1.x: Using Font Awesome with paper-icon-button

Is there a way to use an icon from the Font Awesome library as the icon inside a paper-icon-button? Here is my jsBin. http://jsbin.com/rahesepeho/2/edit?html,output :host { font-family: arial, sans-serif; } The below paper-icon-button uses an image from Github. How do I make the below paper-icon-but...
Mowzer
1

votes
3

answer
1.4k

Views

Stacked font awesome icons with transparent middle?

Is there anyway to have stacked font awesome icons have a transparent middle or borders? Like in this picture? Would love any help because I am totally stumped. here is an image of what I am going for. Plus my code.
Pauline Orr
1

votes
1

answer
120

Views

Font Icon not working in blob image

This is regarding creating an image using canvas and Blob. I am including font-icon in it as shown below. The output shows as squares instead of the icon. var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var data = '' + '\uf040' + ''; var DOMURL = window.URL ||...
Aneesh
1

votes
1

answer
728

Views

Icons of font awesome sometimes become squares, and most of the time load correctly

In my site, the icons of font awesome sometimes become squares, and most of the time, they load correctly, i've been looking for that issue in forums, and it seems that this case is not the same as theirs: the icons are of font awesome and class fa fa-ANYEXAMPLE exists the fonts are in a folder (/cs...
cihan17
1

votes
1

answer
1.1k

Views

Tooltip not displaying on fontawesome icon button

I have a fontawesome icon nested inside a but the tooltip is not popping up. style: i.fa { display: inline-block; }
Arthur
1

votes
5

answer
6.1k

Views

Change Font Awesome's icon color with hover

I just started programming and i need some help. I'm using Font Awesome icons and i'm trying to change it's color when hovered but don't know why it isn't working. I looked up for other people having the same problem here, tried their solutions but it's still not working :( here's part of my HTML co...
Julia Aguiar
1

votes
4

answer
1.5k

Views

Aligning Bootstrap Radio Buttons with text

I am trying to get my radio buttons to align but I am having difficulty doing this. What I am trying to do is have the buttons align with an indentation because I am going to display a caret if the option has been selected. I also want the text to come up just a bit because it's not inline with the...
user3183411
1

votes
1

answer
128

Views

Unwanted Extra Text after modifying Social-share-button CSS in rails app

Ok, I´m building an app and I'm using the social-share-buttongem to display links to social sharing. I styled the look of the social share buttons and after that it's always displaying unwanted text below the icons ( see picture) In the google developer tools this is displaying like this ( see pict...
DaudiHell
1

votes
1

answer
272

Views

Bootsfaces hardcoded font-awesome link

We have a webapp which uses Bootsfaces 0.9.1 for layout and Primefaces 6.0 for the components. I noticed that the load time for pages was quite slow (even a page that only has two p:buttons on it), so I used the browsers network monitor tool to work out what was taking so long. It takes 250ms to try...
PDStat
1

votes
1

answer
90

Views

Laravel 5.3 How does bootstrap interpret and display items without internet

I'm still learning Laravel 5.3 and started studying it a few days ago. One tutorial project I'm following made use of Fontawesome and Bootstrap where bootstrap link and fontawesome link was included within the tag. So I thought that if I disconnect the internet connection, it will fail to display...
jordan
1

votes
1

answer
96

Views

Regex: how to capture all content before next matching pattern (or end of file)

I am trying to process icons.yml (from the FontAwesome-project) with regular expressions. (Language is 'Dyalog APL' which uses the PCRE-Library. I am setting flags there for 'case insensitive' and 'dot matches lines breaks'.) So, with the following input: - name: Glass id: glass unicod...
MBaas
1

votes
3

answer
2.2k

Views

How to get control and icon on the same line in bootstrap?

I am using bootstrap's grid system for page layout. In one of the column i want to show input control and font awesome icon in the same column side by side. However i am not able to get icon aligned properly. it always goes below the control. Here is the JSfiddle Can someone please help me?
LP13
1

votes
2

answer
1.5k

Views

Font awesome not working on iOS

Im trying to get font awesome to work in my app. I've made a custom label to do so: public FALabel() { FontFamily = Device.OnPlatform(null, 'FontAwesome', '/Assets/fontawesome-webfont.ttf#FontAwesome'); } I have added the fonts to the 2 projects. On android it is working as expected - on IOS i...
Kasper Sølvstrøm
1

votes
1

answer
73

Views

How to insert font-awesome icons in MathJax?

I want to write a formular with MathJax where I use a font-awesome icon as a replacement for an mathematical symbol. If I try something like $$6 \cdot + 5 \cdot $$ I get Is there an easy way to get font-awesome icons integrated in MathJax?
Adam
1

votes
2

answer
6.4k

Views

Add top padding to font awesome icons

I'm trying to add some top padding only to the font awesome icon, but if I set padding-top:10px or margin-top:10px to the i element, it also adds padding to the text before it. Can someone help? jsFiddle i { font-size: 30px; padding-top: 10px; } .block { background-color: #ccc; padding: 10px;...
LatentDenis
1

votes
2

answer
34

Views

On click for child element

I want to trigger an on click event for my tag. I added an ID to it but if i try use: $('#delete-playlist-song').on('click', function() { console.log('in'); //doesnt trigger }); It won't trigger so I want to try a different approach? Something like: $('master-playlist-entries').find('i.pl-action')....
irishwill200
1

votes
2

answer
178

Views

Can <li> be used as a flexbox container?

serves as a good flexbox container for . However, when I try to use as a container for other inline items like or it doesn't work. Am I doing something wrong (example below) or does the not make a good flexbox container? See this example pen in action: http://codepen.io/bobtabor/pen/PWyZBQ Here...
Bob Tabor
1

votes
1

answer
688

Views

Adding font awesome spinning cog to jquery click function?

I need to add the font awesome spinning cog while the data is being retrieved and remove it when it's done. This is the html to be added: And this is the script: (function($) { $('.acf-get-content-button').click(function(e){ e.preventDefault(); var $contentWrapper = $( '#acf-content-wrapper' ); var...
Michael Rogers
1

votes
2

answer
133

Views

Font awesome in xpages doesn't work

I'm trying to use awesome font in a xpages application, following the article , however the images of the icons are not loading. Investigating from the debug (F12) of IE I noticed there is an error trying to load, as illustrated below. If you load that same local page it loads normally, as shown in...
Marcus Loza
1

votes
1

answer
2.2k

Views

How can I find the pixel size of a Font-Awesome icon?

I am n the process of creating a website, where I have several font-awesome icons. I now wish to create a ribbon background for each icon. How can I go about finding the correct pixel size of such font-awesome icon?
Craig
1

votes
1

answer
1.1k

Views

Installing glyphs on powerlevel9k

I've installed powerlevel9k on zshell. How do I install glyphs for my terminal? I've tried installing font-awesome and I've set POWERLEVEL9K_MODE='awesome-fontconfig' but it still doesn't work. Also what is awesome-fontconfig? If it's a config file, do I have to create one after I download font-awe...
Vishnu Dasu
1

votes
1

answer
450

Views

Packaging Font Awesome font files in a separate directory with Webpack 2

I am attempting to use Webpack 2 and Font Awesome in a Cordova application. The Cordova application generates a file structure like this: app config.xml hooks node_modules package.json platforms plugins webpack.config.js www (This naturally includes my NPM files and webpack configuration, for conte...
Michael

View additional questions