Coder Social home page Coder Social logo

benoitskipr / font_awesome_flutter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fluttercommunity/font_awesome_flutter

0.0 0.0 0.0 1.35 MB

The Font Awesome Icon pack available as Flutter Icons

License: Other

Java 0.10% Objective-C 0.13% Dart 98.86% Shell 0.22% Batchfile 0.27% Kotlin 0.09% Swift 0.09% HTML 0.23%

font_awesome_flutter's Introduction

font_awesome_flutter

Flutter Community: font_awesome_flutter

Pub

The Font Awesome Icon pack available as set of Flutter Icons.

Based on Font Awesome 5.15.1. Includes all free icons:

  • Regular
  • Solid
  • Brands

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  font_awesome_flutter: <latest_version>

Usage

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // Use the FaIcon Widget + FontAwesomeIcons class for the IconData
      icon: FaIcon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }
     );
  }
}

Icon names

Icon names equal those on the official website, but are written in lower camel case. If more than one icon style is available for an icon, the style name is used as prefix, except for "regular".

Examples:

Icon name Code Style
angle-double-up FontAwesomeIcons.angleDoubleUp solid (this icon does not have other free styles)
arrow-alt-circle-up FontAwesomeIcons.arrowAltCircleUp regular
arrow-alt-circle-up FontAwesomeIcons.solidArrowAltCircleUp solid

Example App

View the Flutter app in the example directory to see all the available FontAwesomeIcons.

FAQ

Why aren't the icons aligned properly or why are the icons being cut off?

Please use the FaIcon widget provided by the library instead of the Icon widget provided by Flutter. The Icon widget assumes all icons are square, but many Font Awesome Icons are not.

What about file size

This package has been written in a way so that it only uses the minimum amount of ressources required.

All links (eg. FontAwesomeIcons.abacus) to unused icons will be removed automatically, which means only required icon definitions are loaded into ram.

Flutter 1.22 added icon tree shaking. This means unused icon "images" will be removed as well. However, this only applies to styles of which at least one icon has been used. Assuming only icons of style "regular" are being used, "regular" will be minified and "solid" and "brands" will stay in their raw, complete form. This issue is being tracked over in the flutter repository. While it is open, a workaround is to create an icon of each style and put it in an invisible container.

Why aren't the icons showing up on Mobile devices?

If you're not seeing any icons at all, sometimes it means that Flutter has a cached version of the app on device and hasn't pushed the new fonts. I've run into that as well a few times...

Please try:

  1. Stopping the app
  2. Running flutter clean in your app directory
  3. Deleting the app from your simulator / emulator / device
  4. Rebuild & Deploy the app.

Why aren't the icons showing up on Web?

Most likely, the fonts were not correctly added to the FontManifest.json. Note: older versions of Flutter did not properly package non-Material fonts in the FontManifest.json during the build step, but that issue has been resolved and this shouldn't be much of a problem these days.

Please ensure you are using Flutter 1.14.6 beta or newer!

How can I use pro icons?

This library only packages the free Font Awesome icon fonts. If you own the pro icon fonts and want to use them with Flutter, please follow these instructions.

โ— By importing pro icons you acknowledge that it is your obligation to keep these files private. This includes not uploading your package to a public github repository or other public file sharing services.

  • Download this package's newest release, extract the folder, move it to a location of your choice and go to that directory
  • Remove #s from pubspec.yaml at the indicated position
  • run flutter packages get
  • Download your font awesome pro icons (web version)
  • Move all .ttf files from the webfonts directory to /path/to/your/font_awesome_flutter/lib/fonts (replace existing fonts)
    • Note: Please make sure all .ttf files (and the following icons.json) are of the same version to avoid missing icons!
  • Move icons.json from metadata to /path/to/your/font_awesome_flutter
  • From there run ./tool/update.sh on linux or .\tool\update.bat on windows
    • Note for windows users: Please run the script in cmd or powershell only. Flutter is known to have problems with third-party shells.
  • Add version >= 4.7.0 to your project's dependencies, Override it with the path to your local installation:
dependencies:
  font_awesome_flutter: '>= 4.7.0'
  ...
  
dependency_overrides:
  font_awesome_flutter:
    path: /path/to/your/font_awesome_flutter
  ...

Duotone icons

Duotone icons require special treatment. Instead of FaIcon a special class FaDuotoneIcon needs to be used. It allows to set the primary and secondary colors for the icon. If primary and / or secondary color are not defined, they will default to the standard IconTheme color. Please be aware that only duotone style icons can be passed to this class. FaDuotoneIcon is only available if at least one duotone icon is available.

FaDuotoneIcon(
  FontAwesomeIcons.duotoneAbacus,
  primaryColor: Colors.black.withOpacity(.4),
  secondaryColor: Colors.black,
);

font_awesome_flutter's People

Contributors

albrnick avatar alexandergottlieb avatar ashotpilosian avatar bartektartanus avatar bcko avatar bensower avatar brianegan avatar britannio avatar chamed avatar falkf avatar michaelspiss avatar pplante avatar slightfoot avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.