FAQ Database Discussion Community


How can I replace the icons in a dijit Tree with font-awesome icons?

javascript,html,css,dojo,font-awesome
I'm trying to switch out the icons in a dijit tree (specifically those that correspond with dijitFolderClosed, dijitFolderOpened - classes that apply to parent nodes in the tree) with font-awesome 'icons'. Switching out what icons are displayed is easy when the icons are actually image files - I can just...

Change icon using jquery on click

javascript,jquery,html,css,font-awesome
Very new to jQuery, i'm trying to change the font icon class on click and display a drop down. currently it changes the icon and drops down, but when i want it to toggle back the text toggles but the icon stays the same. here is my code: $(".answer1").hide(); $(".question1").on("click",...

font-awesome with xpages does not take effect even after loading

xpages,font-awesome
I am using font-awesome in xpages.I have a theme named securePolling in which I am giving links to the resources code inside securePolling is <theme extends="webstandard" xmlns:xsi="http://www.w3.org/2001/XMLSchema- instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/ schema/stylekit.xsd" > <resource rendered="#{javascript:context.getProperty('xsp.resources.aggregate').equals('true')}"> <content-type>text/css</content-type>...

.NET equivalent of .htaccess file

asp.net,.htaccess,iis,cors,font-awesome
I am trying to enable CORS in .NET to get round Firefox policy on cross-domain resources (fontawesome in my case). I've found this solution for Apache that I want to translate to .NET. I've tried to follow these guidelines for the translation, but I got stuck. This is the relevant...

How to change the class of an tag on click? jQuery?

jquery,font-awesome
This is my <i> class: <i class="button fa fa-heart-o"></i> Note that I am using Font Awesome How do I make it so that when the user clicks on it, the class "fa-heart-o" gets replaced with "fa-heart". I am aware of the toggleClass function in jQuery, along with the addClass function...

Font Awesome CSS overriding my CSS

html,css,css3,fonts,font-awesome
I am working on a page - click here for link. The icons are all supposed to have the font size of .side-icon: .side-icon{ font-size:28px; } BUT a style in font-awesome.css is overriding this, no matter where I include the library in the layout. At the moment I have included...

Disable Font-awesome button in JQuery

jquery,font-awesome
How do I disable font-awesome button in JQuery? HTML <a id="btnOK" class="btn btn-primary btn-sm" href="#"> <i class="fa fa-upload"></i> OK</a> JQuery not disabling this button $("#btnOK").prop("disabled", false); Cheers...

Change Font Awesome Icon on Click, but return to original icon when next item is clicked

jquery,twitter-bootstrap-3,onclick,font-awesome,toggleclass
I'm using Bootstrap 3 Panel's and have appended the Font Awesome Plus and Minus icons to the panel items. I'm looking for a way using Jquery to change the plus to a minus "onClick", then when another panel item is clicked I want that minus icon to change back to...

Font Awesome list padding

html,css,font-awesome
I am having some difficulties with the Font Awesome list markers. I am using the solution provided in docs: ul li { padding: 10px 0; border-bottom: dotted 1px #222; } <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <ul class="fa-ul"> <li><i class="fa fa-li fa-check-square"></i>List Item</li> <li><i class="fa fa-li fa-check-square"></i>List Item</li> </ul> Here is the...

Stacking Font-Awesome Star Icons (fa-star & fa-star-half)

html,css,css-float,font-awesome,font-awesome-4.0.0
I want to stack the two Font Awesome icons fa-star and fa-star-half, but I am having alignment issues. See image below: Here is my HTML: <span class="fa-stack"> <i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"></i> <i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i> </span> ...and my CSS: a-stack i.fa-star { color:transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color:...

Font Awesome unicodes displaying as text

css,unicode,font-awesome
I'm trying to insert a FontAwesome icon via css using the Unicode, and my page is displaying it as text. So if the Unicode for a house icon is f015, my browser is displaying "/f015" instead of displaying a house icon. HTML header includes: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> CSS: #MenuBarLink1 a:before...

How to change font-awesome's icon outside size of the container?

css,font-awesome
I am sorry that I really don't know how to describe the detail professionally! I want to use font awesome's icon-sort-up like SO's vote-up icon, when I use it like this: <i class="icon icon-4x icon-sort-down nomargin"></i> I found the outside rectangle area is far bigger than the real triangle icon,...

Why is Font Awesome only showing a square?

twitter-bootstrap,font-awesome
I am trying to replicate the page linked from Start Bootstrap. All goes fine with the exception of the font-awesome.min.css images. I am using the same version of font-awesome.min.css and the same code. My code contains the following, which is taken directly from the page's source code: <i class="fa fa-fw...

How to serve woff2 files from owin FileServer

mime-types,owin,font-awesome,fileserver,woff2
Since font awesome 4.3, they added the fonts as woff2 format. I'm guetting 404ed when trying to serve this file through owin : app.UseFileServer(new FileServerOptions() { RequestPath = PathString.Empty, FileSystem = new PhysicalFileSystem(@"banana") }); How do I serve woff2 mime type files through file server in owin ?...

How to centre font-awesome icons within tag and disable link colour

html,css,twitter-bootstrap,font-awesome
I want to centre a font-awesome within an tag and disable the blu colour but so far I have not succeed in my aim. In addition I wish to have the icon a bit larger but the maximum size supported in font-awesome is 5x. Could you please help me out...

XeLaTex + FontAwesome

fonts,latex,font-awesome
I am trying to use FontAwesome in XeLaTex on OS X. So I followed the steps described on this github: Save this into your project folder as fontawesome.sty Put \usepackage{fontawesome} into the preamble Define command for FontAwesome: \newfontfamily{\FA}{FontAwesome Regular} Redefine required characters (optional): \def\twitter{{\FA \faTwitter}} Use: \href{http://twitter.com/swaycz}{\twitter\ swaycz} So that...

vertically align font awesome icon in td with variable height

html,css,twitter-bootstrap-3,vertical-alignment,font-awesome
I need to vertically align a font-awesome icon in the middle of a td. This td can contain a single or a double line of text, so it has a variable height. I just can't figure out how to align it. I tried everything from line-height over vertical-align to display:...

Font Awesome and text both in placeholder

html,css,font-awesome,placeholder
i want to add the font awesome and texts in the placeholder in the following HTML code at the same time i want to know the process in details: <!DOCTYPE html> <html> <head> <title>Student-login</title> <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> </head> <body> <div class="body"></div>...

Font Awesome Icons not displaying

css,font-awesome
There are lots of threads about this, I know. I spend the last 2 days trying all the solutions in the other questions but still can't fix it. As you can see here: http://www.hoyhombre.com/00002020/6-tips-que-todo-hombre-debe-saber-sobre-usar-perfumes/ font awesome icons aren't showing up. They should show up on the left and bottom on...

How to use font-awesome from server

html,css,fonts,font-awesome
I removed all @import rules from my style.css but then I lost all font-awesome icons that I had on my page. I figured I can get them back if I copied the small section that my page was actually using from www.maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css The icons are still missing and I don't...

AngularJS: Custom font icons

css,angularjs,font-face,font-awesome,glyphicons
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project. Are there any way to do that? I created a font in .ttf and .svg with my icons, and the result is...

How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?

html,css,checkbox,font-awesome,text-indent
I am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see...

Jquery Accordion with Font Awesome Toggle

javascript,jquery,font-awesome,jquery-accordion
I've been looking through the boards, and haven't found a solution to help with my issue at hand. I have an accordion feature that features font-awesome. I want to be able to toggle between the font awesome classes fa-angle-up/fa-angle-down when the accordion button is clicked. This is simple enough, but...

Using font-awesome as HTML content

css,font-awesome
I need to be able to use font-awesome as HTML content. So instead of using the :before selector in css and doing something like this: .wysihtml5-command.blockquote:before { content: "\f10d"; } I need to actually use it inside HTML tags like this: <a class="someclassWithFontawesomeAsFont">\f10d</a> But this does not work. Is there...

Inlined icon links have weird behavior on (some) android devices

android,html,css,icons,font-awesome
So here is a tiny jsFiddle : <html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style> .navButton { font-size:30px; height:43px; text-align: center; } </style> </head> <body> <div style="display:inline-block"> <a class="navButton" href="#"><i class="fa fa-camera"></i></a> <a class="navButton" href="#"><i class="fa fa-camera"></i></a> <a class="navButton"...

Font Awesome not working in offline mode

html,css,font-awesome,offline
i am using font-awesome icons for publishing my HTML,CSS templates. They are working fine when i have the live link but when i download the CSS file and include that in my pages icon disappears. Live Path : <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> Local Path : <link href="css/font-awesome.css" rel="stylesheet"> How can i...

Anchor html () just works for right click not left click [closed]

javascript,html,css,font-awesome
I have an anchor tag as following that does not work for left click. At present, users need to right click on it to open it because left click does not work. Once I left click on the links the display style of <li> of the clicked anchor gets changed....

How to position an icon alongside text?

css,html5,twitter-bootstrap,font-awesome
I'm struggling to get a font-awesome icon alongside a heading and paragraph like in the picture below: How can I achieve this?...

Stacking font-awesome icons within SVG

svg,d3.js,font-awesome
I'm trying to embed some font-awesome icons within a D3 visualization which is using SVG. I've found some solutions that get me part of the way such as: How do I include a font awesome icon in my svg? Adding FontAwesome icons to a D3 graph These are a great...

Font-awesome: how does it use class names to affect its content? [closed]

html,css,less,font-awesome
I'm trying to build a program that can utilize a classname for its data (i.e. if class="hero-banner-80" I could use the 80 as its width) and I was wondering how font-awesome does it? It uses its class-name to decide which char to place inside its element, and reading the src...

font-awesome , when use attribute the icon disapear

html,css,font-awesome
I have the following code: <i class="fa fa-chevron-left"></i> but when I add an id and onclick attribute like so: <i class="fa fa-chevron-left" id="back" onclick="backNews();"></i> the icon disappears. Can anyone see the problem? The icon re-appears if I remove the attributes I have also tried to remove the <i> and replace...

Want to show pause icon when video set to pause

javascript,jquery,html,css,font-awesome
I want to show pause icon when the movie is paused . currently its show only the play icon . I don't know how to do it with javascript help! My HTML: <video id="video" height="100%" width="100%" autoplay muted> <source src="video/google.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the...

Using rack-cors with Rackspace CDN issues

ruby-on-rails,cors,rack,font-awesome,rackspace
I have a rails 4.2 app using rack-cors. None of my font-awesome icons show up even though all my other assets are fine. I'm using the rackspace cdn. My CDN url looks something like http://ddf908e003b5678bc25-9d6bfcdc12345678ba868a15bca98.r12.cf5.rackcdn.com/assets/main-4f3595479ce96112e1b8ab4e5357fc26.css My rack-cors config is in my config/application.rb config.middleware.insert_before 0, "Rack::Cors" do allow do origins 'localhost:3000',...

Add border to fa-circle

css,font-awesome
How can I add a border to the circle icon from Font Awesome? Actually my result is: http://jsfiddle.net/0jhdvj0k/ The border is something like an ellipsis, instead a circular border. <table class="table table-condensed table-hover table-striped"> <thead> <tr> <th></th> <th>AAAA</th> <th>AAAA</th> <th>AAAA</th> <th>AAAA</th> <th>AAAA</th> <th>AAAA</th> </tr> </thead> <tbody> <tr> <td style="width: 55px;"...

Customize a select with font-awesome

css,select,font-awesome
This is what I have actually: HTML <label class="select"> <select name="email" id="email"> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> </select> </label> CSS .cforms select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select { position:relative; display: -moz-inline-stack; display: inline-block; vertical-align: middle; zoom: 1;...

How to align elements in a bootstrap-form

css,twitter-bootstrap,font-awesome
Pls. have a look at my code @ http://www.bootply.com/VcVDblSFK7 - I would like to have the span with the key-symbol and the input-control in the same row (followed by the span for the error-msg). but I've done too much editing and am not seeing a way out of this. <div...

font-awesome and site conversion from older version to latest

css,angularjs,font-awesome
I am trying to convert our project to use the latest macadmine theme. It was using font awesome 3 and now with switching to font awesome 4 I have to change all icons to the proper names. I found this page https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4 but I don't understand what should I use...

Why is Font-Awesome not working

html5,css3,twitter-bootstrap-3,font-awesome
I'm linking font-awesome in my html file like this: <head><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></head> The icons are not showing up when I'm working locally on my website. But they are showing up on the server! I thought it could be the extension Ad Plus which is blocking it, but it's not because...

How to align fontawesome icon to the middle of a line (already tried the existing solutions)

html,css,font-awesome
i would like you to help me get this working: html code: <div class="mainMenu"> <ul> <li><a href="/">Home</a></li> <li><a href="/">Reviews <i class="fa fa-sort-desc"></i></a></li> <li><a href="/">News</a></li> <li><a href="/">Videos <i class="fa fa-sort-desc"></i></a></li> <li><a href="/">Forums</a></li> </ul> </div> css code: .mainMenu { overflow: hidden; float: right;...

Domain won't go to https://example.com, when example.com is typed

php,ssl,fonts,opencart,font-awesome
I'm using an OpenCart 2 theme and my PHP skills aren't great. My problem: When I type example.com in, the SSL lock isn't displayed and my Font Awesome fonts do not display. So the shopping cart icon just shows as a blank square. However, if I click example.com's logo or...

Showing/hiding elements in row when hovering the row

jquery,html,css,angularjs,font-awesome
I have an HTML table that I create using angular-datatables. The HTML for the table looks like this <table ng-if="devicesLoaded()" datatable="ng" class="device-table table table-hover" dt-options="dtOptions" dt-column-defs="dtColumnDefs"> <thead> <tr> <th>Id</th> <th ng-repeat="key in getParametersColumns()">{{key | capitalize}}</th> <th></th> </tr> </thead> <tbody> <tr class="no-border" ng-repeat="item in data"> <td>{{item.id}}</td>...

Moving a font awesome icon

bootstrap,font-awesome
here's my first post on stackoverflow :) I'm a web-design student, pretty noob but so enthusiastic. I was trying to make a website using bootstrap and font-awesome icons, but i don't know how to move "a little bit" one of those icons. My code is: <div class="col-md-4"> <span class="fa-stack fa-4x">...

Font-awesome: An emoticon looks different on my computer than on the actual webpage

html,css,font-awesome,emoticons
I am trying to add on my webpage the ResearchGate emoticon from academicons which is an extension to font-awesome. Here is what the emoticon should look like: It works fine when I open my index.html on my computer (user/name/path/to/index.html) but it doesn't work when I open my webpage (www.blabla.bla.bl). Of...

Can i use font-awesome in android's edittext?

android,plugins,font-awesome
I have added font-awesome .tff file to the assets folder, initlaized some of the icons in the strings.xml file, changed the typefaces of the entities i will use font-awesome in and tried using font-awesome on buttons and it worked, but i did the same for edittexts but there are strings...

fa-star () is always yellow, how to make it white?

css,colors,font-awesome,font-awesome-3.2
setting color:white; or even using the class icon-light or icon-white makes all font-awesome-icons white, except for fa-star which remains yellow no matter what I do! I've tried overriding css with methods as desperate as using !important in an inline-styling on the element. the star remains yellow! (see image below) Why...

Font Awesome i css [duplicate]

css,font-awesome
This question already has an answer here: Use Font Awesome Icons in CSS 2 answers I would like to change the + in the css into a shopping cart. I have installed Font Awesome on my site but when i put the line <i class="fa fa-cart-plus"></i> in it does...

Border-radius breaking on font awesome?

html,css,font-awesome
I am trying to add border and then border-radius on font-awesome icon but its displaying black holes on top and bottom. Here is the image of issue i here is my CSS code i.fa{ color: #fff; text-shadow: 1px 1px 1px #ccc; border-radius: 15px; border: 1px solid #fff; font-size: 20px; }...

Why does CDN work, but a relative link does not?

css,cdn,font-awesome
I just asked this question: Why is Font Awesome only showing a square?. The gist of it is that my font-awesome.min.css file was not working. I was getting 404 errors when trying to load icons from it. Someone gave the ridiculous suggestion of changing: <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> to <link...

How do i include font awesome classes in my css file?

html,css,font-awesome
I can copy the fa classes from font awesome css but dont know how to copy data from EOT and WOFF (font files). I am not using bootstrap. Just my html and css files. Please help.

What's the easiest way to add font-awesome in rails 4

ruby-on-rails,font-awesome
I have followed the instructions from font awesome guide at http://fortawesome.github.io/Font-Awesome/get-started/ but the font doesn't appear to my html.erb page, instead it shows weird symbols.

Font Awesome Implementation into ASP.NET TextBox Server Control

css3,twitter-bootstrap,font-awesome
http://www.petcenters.com/painting-estimate is a test page with Bootstrap enabled ASP.NET Controls utilizing CssClass Selector. I have attempted to implement Font Awesome Classes into ASP.NET TextBox Controls following guidelines illustrated within: Bootstrap Documentation <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div> A Bootstrap Template that I'm...

FontAwesome 4.3.0 icons not displaying properly on my site

html,css,fonts,font-awesome
I'm having trouble getting FontAwesome 4.3.0 to display correctly on my page. In the head section I have: <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> The fonts within the first style sheet work fine, but the fonts within 4.3.0 do not. Here is my demo site. Demos 1, 3, and 6...

Fix bootstrap differences betwen GlyphIcon and FontAwesome

twitter-bootstrap,font-awesome,glyphicons
I currently trying to create a nice navbar menu using bootstrap web framework and I have to use both font family icons GlyphIcon and FontAwesome but my problem is that the icons are not created with the same size and I have differences between FontAwesome and GlyphIcons, does someone know...

how to append an icon to an input search?

css3,twitter-bootstrap,font-awesome
I am trying to append an icon to an input. with font awesome is possible to attach that icon on the value of the input, like this: <input class="btn" type="submit" value="&#xf090;"> where value="&#xf090;" is the equivalent of <i class="fa fa-sign-in"></i>, that is perfect so far, but I need that icon...

Why does css transition on an icon/link cause it to redraw in the wrong place after transition has been applied?

css3,font-awesome
I am having an issue identifying why after a CSS transition is applied on an icon/link it redraws in the wrong place. Here is demo of it happening: https://jsfiddle.net/9n4edjzc/ div.rotate > a { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:...

Font Awesome version 4 - Button with spin icon

twitter-bootstrap,font-awesome
I found this great JSFiddle using Bootstrap and Font Awesome to show a spinner inside a button: JSFiddle snippet <button class="btn btn-success has-spinner"> <span class="spinner"><i class="icon-spin icon-refresh"></i></span> Foo </button> This was using Font Awesome version 3.0.2. I'm using version 4.2.0, but is it right that this has been removed from...

CharCodes for glyphs in a custom font from http://fontello.com

css,font-awesome,glyph
How can I find the charCode for a glyph in a custom font? For a light-weight web site, I have created a custom font containing just the 5 icons from FontAwesome that I need, using http://fontello.com. I am hoping to use these to replace the characters from the complete FontAwesome...

How to adjust font awesome down arrow via css

css,font-awesome
I'm using font awesome and I'm using one of the down arrows next to some text to indicate a dropdown but the arrow is very low next to the adjust and I would like to be able to raise the arrow but can't seem to figure out how. Here is...

Font Awesome unexpected bottom margin

html,css,twitter-bootstrap,font-awesome
Ok I've got headache at this point and this thing irritates me. (Hours wasted for this) For some reason, font awesome icon has bottom margin while bootstrap's glyph seems fine. Please check http://jsfiddle.net/damjd2sj/ <body> <div class="container"> <form> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div...

font awesome not showing from bootstrap theme and im using eclipse

css,eclipse,twitter-bootstrap,fonts,font-awesome
im just a newbie and im trying to use agency start bootstrap theme. im using eclipse, and i tried to modify the home.jsp to locate the css and scripts but the font awesome and glyphicons are not showing. here is what i did. <!-- Bootstrap Core CSS --> <style type="text/css"><%@include...

What does the -o suffix mean in fontawesome?

font-awesome
It seems to mean opposite, because it is the inverted version of the non '-o' icon version. But that doesn't seem like the right answer to me. There is clearly a pattern behind this decision because many icons follow the same patter. But what does the '-o' suffix mean? ...

where does the space between a FontAwesome icon and an A tag comes from?

css,font-awesome
Live page: http://xrsand.com/index.php?option=com_k2&view=item&layout=item&id=92&Itemid=305 Every mosaic has two lines under the image, each line has a FA icon in the front of it. The first line is a link, while the 2nd is plain text. I am using fa-fw to keep the icon at same size and to align the texts....

FontAwesome icon crash only when release mode

ios,objective-c,xcode,release,font-awesome
When my project in debug mode ,everything work fine. But when I change to release mode, my app crash at [_menuButton setTitleTextAttributes:@{NSFontAttributeName:[UIFont fontWithName:kFontAwesomeFamilyName size:30.0], NSForegroundColorAttributeName:[UIColor whiteColor] } forState:UIControlStateNormal]; the error message is * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '* -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from...

Font Awesome fonts displaying as boxes after Git clone/pull?

git,font-awesome
I've been experiencing a rather strange issue and I wanted to see if anyone else had experienced the same and if they had found a solution. For a given web project, I download Font Awesome, include the CSS files and make sure that all files are being loaded correctly (no...

font awesome ios icons all the same

ios,font-awesome
I'm trying to use FontAwesome on my ios app (ios8, xcode6), and am having trouble. I've downloaded the font, tried the TTF and OTF versions separately. I've included the font name in my plist file, and have included the NSString+FontAwesome and UIFont+FontAwesome categories that are standard out there. The problem...

font-awesome not working in wordpress

html,css,wordpress,fonts,font-awesome
I have a wordpress site and I installed the shortcode plugin. I am trying to install a button and I put an icon on it. When I load my site here you can see it under the slider, the button that says photo gallery http://denverkollel.org/site/ it's on the blue background....

Font awesome icon does not get bigger although fa-5 is set

html,css,font-awesome
My pen: http://codepen.io/helloworld/pen/YPxBEJ Why is the rss icon so small? It does not resize whatever fa-x I use? <div class="container"> <div class="row"> <div class="col-xs-6"> <div class="jumbotron jumbotron-icon"> <div class="container"> <div class="info-icons"> <i class="fa fa-rss-square fa-5"></i> </div> </div> </div> </div> <div class="col-xs-6"> Lorem ipsum dolor sit amet, consetetur sadipscetur sadipscing elitr,...

fontawesome - Icons appear only as rectangular shapes

css,font-awesome
as I wrote in the title when I use fontawesome, any icons appear only as rectangular shapes. In this case I used fontawesome CDN- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> And I want to create angle right and angle left for slider which is position: relative <a href="#" class="prev"> <i class="fa fa-angle-left fa-5x"></i>...

Font Awesome - Change color - “” format

html,css,icons,font-awesome
I know it's easy to change the color if you use the standard format and css : <i class="icon-cog"></i> But I'm forced to use the html format (&#xf0c7) of the icon: <input id="btn-save-workout" type="submit" class="btn btn-default pull-right btn-sm" value="&#xf0c7; Save"> http://fortawesome.github.io/Font-Awesome/cheatsheet/ Not sure it's possible with this syntax. I tried...

Changing singular icon color when hovering link

css,hover,icons,font-awesome,mousehover
First question at StackOverflow. I've been busting my head to figure this one out. My main menu options (@ gabrielpinto.pt) are made of text and icon (FontAwesome). I want to change the hover color of the icon WHEN I'm hovering the written link. Here's one of the menu option's markup:...

PrimeFaces icons not render on the commandButton

css,jsf,jsf-2,primefaces,font-awesome
I am trying to use a font awesome icons with JSF+PrimeFaces. I added to my pom.xml file webjars dependency: <groupId>org.webjars</groupId> <artifactId>font-awesome</artifactId> Also I have my custom css file: body{ background-image: url("#{resource['images/loginBackground.jpg']}"); background-size: 100%; font-family: 'Belleza', sans-serif; font-size: 16px; } I added css's resources to my page (.xhtml) in this way:...

Font-awesome class fa is not being added with JQuery

javascript,jquery,html,font-awesome,addclass
I have a button where I want the HTML and font-awesome icon to change on an odd number of clicks and revert back on an even number of clicks. For example, I have a button named mute. If a user clicks on the button, I want the html to change...

Aligning text next to icons

html,css,font-awesome
So I'm trying to align these images next to each other but I'm having trouble doing so. I tried a vertical-align however wasn't successful at it! HTML: <ul class="ex-links"> <li><i class="fa fa-users"></i><a href="">About Us</a></li> <li><i class="fa fa-flag"></i><a href="">Events</a></li> <li><i class="fa fa-picture-o"></i><a href="">Gallery</a></li> <li><i class="fa fa-question-circle"></i><a...

Selector which change button padding if it has an icon [duplicate]

css,css3,twitter-bootstrap,css-selectors,font-awesome
This question already has an answer here: Is there a CSS parent selector? 17 answers I am using Font Awesome icon with Bootstrap button classes and some CSS to create circle buttons: check my CSSDesk. I moved from default Bootstrap to Bootswatch Paper and I had to override paddings:...

Where is The Documentation of Font Awesome 4.1.0?

css,fonts,documentation,font-awesome
Anyone know where is the documentation of font-awesome version 4.1.0? I really need it now! The new version (4.3.0) has different class names and images for the icons. So I don't know what are the icons like and it's class name in font-awesome version 4.1.0. Can someone tell me where...

Horizontally aligned fontawesome icons

html,css,font-awesome
I have a unordered list where I have some font-awesome icons. I am trying to align them horizontally. When I align them horizontally they stack up on each other a bit. Not sure what I am doing wrong. CSS: .tbl-op ul{margin-left: 0;padding: 0;list-style-type: none;color:#2895f1;}.tbl-op li {cursor: pointer;display:inline-block;} HTML: <div class="btn-group...

FontAwesome - Failed to decode downloaded font

css,fonts,less,font-awesome
I found allready this: http://stackoverflow.com/search?q=Failed+to+decode+downloaded+font But the Answers dont help to fix my problem =/ I got on my page this errors in console: Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff2 index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font:...

Button Toggle using :before :after with Font Awesome Icons

jquery,css,button,font-awesome,pseudo-class
I have a toggle button that uses the bars Font Awesome icon and I'm using the :after pseudo class to add a left caret to the left side of the bars. When I click the button, I want the left caret to go away and a right caret on the...

Change class on click based on current class

jquery,click,font-awesome,addclass,removeclass
I want to take a simple FontAwesome icon: <div class="emotion"> <i class="fa fa-smile-o"></i> </div> and swap the class depending on what the current class is: $(".emotion .fa-smile-o").click(function (){ $(this).removeClass('fa-smile-o').addClass("fa-meh-o"); }); $(".emotion .fa-meh-o").click(function (){ $(this).removeClass('fa-meh-o').addClass("fa-frown-o"); }); $(".emotion .fa-frown-o").click(function (){ $(this).removeClass('fa-frown-o').addClass("fa-smile-o"); }); But currently this only works for the first class...

How can I integrate Font Awesome 4.3.0 with JSF?

jsf-2,font-awesome
I've already tried this method: How to use Font Awesome from webjars.org with JSF It actually works great. The problem is that configuring the omnifaces UnmappedResourceHandler as a resource handler breaks one of my other JSF library components: faces-config.xml: <application> <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler> </application> When I try to use an ace:dataExporter (which...

Stack small icon over a large icon with font-awesome

html,css,twitter-bootstrap,font-awesome
I'm trying to create a round '+' button using font-awesome. I'm attaching an image of a similar button from google contacts: I tried to use font-awesome's icon stack as follows: <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-plus fa-stack-1x fa-inverse"></i> </span> But this is the result: As you...

Font Awesome - Getting wrong icon for Foursquare

font-awesome
I'm using font-awesome in my website, and I'm getting the wrong icon for Foursquare brand. I'm using this html: <i class="fa fa-foursquare"></i> And this is the css content, according to fontawesom.css: .fa-foursquare:before{content:"\f180"} which is correct, according to the official Font Awesome website. Everything seems to be ok, but instead of...

Manage list-style size in unordered list using Font Awesome

css,font-awesome
I get this code to use Font Awesome icons in an unordered list. It works fine but I'd like to make the icons bigger and get it verticaly aligned with the text. .node .field-name-body ul li { color:#333;list-style: none;} .node .field-name-body ul li:before { font-family: 'FontAwesome'; /* http://fortawesome.github.io/Font-Awesome/cheatsheet/ */ content:...

Which element to use for font icons in bootstrap navbar

twitter-bootstrap,twitter-bootstrap-3,font-awesome,glyphicons,font-awesome-4.0.0
Bootstrap 3 navbar uses glyphicons and Font Awesome icons as shown in html below. Bootstrap manual recommends to use span element: <span class="fa fa-pencil-square-o" aria-hidden="true"></span> FontAwesome web page recommends to use i element: <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Using i element makes icon bigger than using span . Bigger looks better....

I want to change the select icon/dropdown icon to (fa-chevron-down). How can I?

html,css,html5,twitter-bootstrap,font-awesome
I want to use a form like in the code is from bootstrap but i want to change the select icon/dropdown icon to fa-chevron-down. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-6">...

Using Font Awesome in XSLTForms

font-awesome,xsltforms
I tryed to use Font Awesome in XSLTForms but no sucess. I included a link in the header, but every time I try to use an icon, it is not shown. Other CSS styles contained in different files work, but even if I include a tags at the beggining and...

Font Awesome: how to remove the space around a circled number

font-awesome
I am using Font Awesome to create a circle around a number. HTML is as follows: <span class="fa fa-stack fa-3x" > <i class="fa fa-circle-thin fa-stack-1x" ></i> <strong class="fa-stack-1x" >2</strong> </span> Here is the jsfiddle demo: http://jsfiddle.net/mddc/dkgzLrLf/2/ As seen in this demo, there is quite space around the circle. How can...

Font Awesome Borders in CSS

html,css,twitter-bootstrap,font-awesome
I'm in the process of doing a redesign of my site. Maybe someone could be so kind to shed some light on an issue I am having. Below is a mock up of what I'm trying to do. I am using font awesome to create icons and would like to...

SASS Optimize Font Awesome for only used classes

css,sass,font-awesome
Is it possible to make SASS only add the code for the used icons? Because this will reduce the CSS file size, I saw the http://fontello.com/ solution from a similar question, but I wanted to use to know if there is a way to do it with font awesome, Edit:...

Appending Font Awesome to table in Javascript

javascript,jquery,html,css,font-awesome
I've inherited some code however I am not very familiar with how it is working. It currently gets usernames and appends them to their respective table. I am trying to add font awesome icons next to the usernames but I am not sure I am implementing it correctly. Code: $.when(instagram,...

Social-buttons hover effect changing icon color

ruby-on-rails,twitter-bootstrap,font-awesome
I am using Social Buttons for Bootstrap (http://lipis.github.io/bootstrap-social/) to add icon links to facebook and twitter, but I'm having trouble getting them to behave like the examples on the above site. The buttons show up fine, but when you hover over them, the icon changes to a darker color. In...

android: show font icon as a sequence of number string

android,font-awesome
I want to put a Font-Awesome icon inside textview text. After I set the text, android shows me a string sequence instead of font-icon. My code is: String formatedSection = formatedSection + sections.get(i).getContent() +getResources().getString(R.string.icon_ref); I define icon_ref in string.xml as below: <string name="icon_ref">&#xf075;</string> I followed these instructions to add font-icon....

font-awesome to be inserted in value=“”>

spring,button,input,font-awesome
im trying to insert some font-awesome inside here <form action="/someweb.html"> <input type="submit" class="btn btn-success" value="<spring:message text="View List"/>"> </form> but it seems that this code <i class="fa fa-list-ul fa-lg"></i> wont fit inside, and i tried to insert it inside in different position, i always get failed result. all i wanted is...

How do I add an icon inside a text_field_tag

css,ruby-on-rails,font-awesome
I'm using Rails 4 and Font Awesome (sass). I would like to add an icon to the left side of the search function, just like on Stack Overflow. This is my code for the search function. index.html.erb <%= form_tag products_path, method: :get do %> <%= text_field_tag :query, params[:query], placeholder: "Search..."...

Font Awesome Icon with characters on it

css,font-awesome
I would like to have font awesome with charaters on it , but it fails to do that.Please help to understand whats going on wrong. Output : Code Tried : <i class="fa fa-square fa-2x" style="color:red;"><span style="text-color:white;">S</span></i> <i class="fa fa-square fa-2x" style="color:yellow;"><span style="text-color:white;">XL</span></i> <i class="fa fa-square fa-2x" style="color:green;"><span style="text-color:white;">XXL</span></i> ...