FAQ Database Discussion Community

## 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..."...

## 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:...

## 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....

## 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....

## 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? ...

## 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...

## 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...

## 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...

## .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...

## 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...

## 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...

## 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:...

## how to append an icon to an input search?

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...

## 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...

## 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...

## 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...

## 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...

## 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,...

## 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...

## 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...

## 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...

## 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...

## How to align elements in a bootstrap-form

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...

## 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,...

## 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:...

## Fix bootstrap differences betwen GlyphIcon and FontAwesome

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 position an icon alongside text?

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

## 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...

## Font-awesome class fa is not being added with JQuery

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...

## 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...

## 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...

css,fonts,less,font-awesome

## 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.

## 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...

## Disable Font-awesome button in JQuery

jquery,font-awesome

## Change class on click based on current class

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...

## Social-buttons hover effect changing icon color

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...

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...

## 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...

## 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...

## 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; }...

## 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....

## 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...

## 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...

## 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...

## 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...

## 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.

## 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"...

## 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:...

## 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",...

## Why is Font-Awesome not working

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 centre font-awesome icons within tag and disable link colour

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...

## 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>...

## 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...

## Font Awesome Implementation into ASP.NET TextBox Server Control

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...

## 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 ?...

## 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...

## 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...

## 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...

## 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...