This library contains a dart package useful to develop web-applications
using fontawesome icons
Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites, created and maintained by [Dave Gandy](https://twitter.com/davegandy). Stay up to date with the latest release and announcements on Twitter: [@fontawesome](http://twitter.com/fontawesome).
Get started at <https://fontawesome.com/!>
1 - Create a new project with next structure:
[project_root]
├─ analisys_options.yaml
├─ pubspec.yaml
├─ web
│ ├─ index.html
│ ├─ style.css
│ └─ ... other files and folders ...
2 - In the pubspec.yaml file add the font_awesome dependency as
below:
name: web_css_sample
description: An absolute bare-bones web app.
environment:
sdk: '>=2.4.0 <3.0.0'
dependencies:
# font_awesome: any # uncomment and change for latest version
dev_dependencies:
build_runner: ^1.5.0
build_web_compilers: ^2.1.0
pedantic: ^1.7.03 - In styles.css file import the css file from font_awesome
library:
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(/packages/font_awesome/css/all.css); /* font_awesome css file is imported here */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#output {
padding: 20px;
text-align: center;
}4 - In index.html add the needed component and classes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>web_css_sample</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script defer src="main.dart.js"></script>
</head>
<body>
<div id="output"></div>
<!-- Next code will show an icon star from font_awesome library-->
<p>
Star Icon: <i class="fa fa-star"></i>
</p>
</body>
</html>5 - Run next command to start development server:
webdev serve --auto refresh6 - Once you are ready to build and deploy your project run next command:
webdev build1 - Create a new project with next structure:
[project_root]
├─ analisys_options.yaml
├─ pubspec.yaml
├─ web
│ ├─ index.html
│ ├─ style.scss
│ └─ ... other files and folders ...
2 - In the pubspec.yaml file add the font_awesome and sass_builder
dependencies as below:
name: web_sass_sample
description: An absolute bare-bones web app.
# version: 1.0.0
#homepage: https://www.example.com
#author: luis <luisvargastijerino@gmail.com>
environment:
sdk: '>=2.4.0 <3.0.0'
dependencies:
# font_awesome: any # uncomment and change for latest version
dev_dependencies:
build_runner: ^1.5.0
build_web_compilers: ^2.1.0
pedantic: ^1.7.0
sass_builder: ^2.1.2Note
During development
sass_buildercompiles thescssfiles whenever they change and generates a bundledcssfile that only exist in memory. During final build it generates acssfile in thebuildfolder.
3 - In styles.css file import the css file from font_awesome
library:
@import url(https://fonts.googleapis.com/css?family=Roboto);
// If fonts are in different location change the path with next line:
// $fa-font-path: "/<path to your>/font_awesome/webfonts" !default;
// We import font_awesome sass files here
@import "package:font_awesome/scss/fontawesome";
@import "package:font_awesome/scss/solid";
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#output {
padding: 20px;
text-align: center;
}4 - In index.html add the needed component and classes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>web_sass_sample</title>
<link rel="stylesheet" href="styles.css"> <!-- We import the `styles.css` file instead `styles.scss` -->
<link rel="icon" href="favicon.ico">
<script defer src="main.dart.js"></script>
</head>
<body>
<div id="output"></div>
<!-- Next code will show an icon star from font_awesome library-->
<p>
Star Icon: <i class="fa fa-star"></i>
</p>
</body>
</html>5 - Run next command to start development server:
webdev serve --auto refresh6 - Once you are ready to build and deploy your project run next command:
webdev build-
The Font Awesome font is licensed under the SIL OFL 1.1:
-
Font Awesome CSS, LESS, and Sass files are licensed under the MIT License:
-
The Font Awesome documentation is licensed under the CC BY 3.0 License:
-
Attribution is no longer required as of Font Awesome 3.0, but much appreciated:
-
Font Awesome by Dave Gandy - http://fontawesome.io -
Full details: http://fontawesome.io/license/
Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.
-
Email: dave@fontawesome.io
-
Twitter: http://twitter.com/davegandy
-
GitHub: https://github.com/davegandy
- Luis vargas: luisvt@github.com