font-awesome

Font Awesome icon inside text input element

Output: HTML: <input name=”txtName” id=”txtName”> <span class=”fa fa-info-circle errspan”></span> CSS: <style type=”text/css”> .errspan { float: right; margin-right: 6px; margin-top: -20px; position: relative; z-index: 2; color: red; } </style> (Or) Output: HTML: <div class=”input-wrapper”> <input type=”text” /> </div> CSS: <style type=”text/css”> .input-wrapper { display:inline-block; position: relative } .input-wrapper:after { font-family: ‘FontAwesome’; content: ‘\f274’; position: absolute; right: … Read more

How to add font-awesome to Angular 2 + CLI project

After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don’t need any vendor files, no system.js — only webpack. So you do: npm install font-awesome –save In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below: “apps”: [ { “root”: “src”, … Read more

Use Font Awesome icon as CSS content

Update for FontAwesome 5 Thanks to Aurelien You need to change the font-family to Font Awesome 5 Brands OR Font Awesome 5 Free, based on the type of icon you are trying to render. Also, do not forget to declare font-weight: 900; a:before { font-family: “Font Awesome 5 Free”; content: “\f095”; display: inline-block; padding-right: 3px; … Read more

Font Awesome 5 – why aren’t icons like bitcoin, facebook, twitter showing?

You also need to use the brands.css stylesheet in font-awesome 5.0.8. Additionally, you need to make sure your class names are up to date. Try the snippet below: <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.8/css/brands.css” integrity=”sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh” crossorigin=”anonymous”> <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css” integrity=”sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P” crossorigin=”anonymous”> <i class=”fab fa-btc”></i> <i class=”fab fa-bitcoin”></i> Alternatively, you can just use the all.css stylesheet to include all … Read more

How to use icons and symbols from “Font Awesome” on Native Android Application

Font Awesome seems to be working fine for me in my android app. I did the following: Copied fontawesome-webfont.ttf into my assests folder Found the character entities for icons I wanted, using this page: http://fortawesome.github.io/Font-Awesome/cheatsheet/ Created an entry in strings.xml for each icon. Eg for a heart: <string name=”icon_heart”>&#xf004;</string> Referenced said entry in the view … Read more

Use Font Awesome Icon in Placeholder

If you’re using FontAwesome 4.7 this should be enough: <link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”/> <input type=”text” placeholder=”&#xF002; Search” style=”font-family:Arial, FontAwesome” /> A list of hex codes can be found in the Font Awesome cheatsheet. However, in the lastest FontAwesome 5.0 this method does not work (even if you use the CSS approach combined with the updated font-family).

How to know if a font (@font-face) has already been loaded?

Now on GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js Essentially the method works by comparing the width of a string in two different fonts. We are using Comic Sans as the font to test against, because it is the most different of the web safe fonts and hopefully different enough to any custom font you will be using. Additionally we … Read more

Use Font Awesome Icons in CSS

You can’t use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up. Be sure to set position:relative on your actual text wrapper for the positioning to work. .mytextwithicon { position:relative; … Read more