local-icons

This repo has been created recently, I'm trying to upload the icons as fast as I can. Check out the roadmap.

Put any icon in your HTML web page in a sooo easy way!

The aim of this repo is help people to easily put icons in their web pages without having to do too much work. I also want to make this repo a collection of icons where people can find them easily and just copy/paste to use them.

• Copy/paste the icon CSS class into your stylesheet in order to have the icon shown in your HTML.
• No need to import external css files, only use the provided CSS class and enjoy.

Table of contents

• Example SVG
• Example PNG
• Create your own icon
• Roadmap
• Credits
• Related & Similar projects
• The icons
  • Social media icons list
  • Fontawesome black icons list
  • Fontawesome white icons list

Example SVG

HTML code:

<i class="android-svg-icon"></i>

CSS class:

.android-svg-icon {
	width: 30px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
	display: inline-block;
	background-image: url(
		data:image/svg+xml;base64,PD9....<rest_of_the_base64_string>);
}

would output the icon:

The whole base64 string of the android icon is located here

Example PNG

HTML code:

<i class="apple-icon"></i>

CSS class:

.apple-icon {
	width: 30px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
	display: inline-block;
	background-image: url(
		data:image/png;base64,iVB....<rest_of_the_base64_string>);
}

would output the icon:

The whole base64 string of the apple icon is located here

Create your own icon

Manual way

Copy & create each CSS class manually.

1. Go to https://www.base64-image.de/
2. Upload or drag & drop the icon image.
3. Wait for the progress to finish.
4. Click on the copy css button.
5. Put the copied stuff into a CSS class, like this (replace <copied_stuff>):

.my-awesome-icon {
	width: 30px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
	display: inline-block;
	background-image: <copied_stuff>
}

6. Use it!

<i class="my-awesome-icon"></i>

Using the script

Allows creating the CSS classes in an automatic way for multiple icons.

I've created an automatic PHP script in order to create the icon CSS classes easier.

Put your icon(s) in the folder faw-icons-png and do the following:

cd faw-icons-png

../script/icon-generator.php -d 1 -t png

find . -type d -exec mv {} ../icons \;

Roadmap

• Upload all the icons from encharm/Font-Awesome-SVG-PNG. Black & white.
• Upload all the icons from neilorangepeel/Free-Social-Icons
• Create an automated script to pick a PNG or SVG image and create all the files and CSS code in order to be ready to upload to this repo.
• Create a "Create your own icon" section.
• Create a "Contribution guidelines" section.
• Create a PNG image icon example. ✅
• Create an SVG image icon example. ✅
• Improve the example.html file.

Credits

• I got the idea of creating this repo reading this wiki from barryclark/jekyll-now.
• All the credits should go to them who have made available the icons for us:
  • neilorangepeel/Free-Social-Icons. Great social-media SVG icons!
  • encharm/Font-Awesome-SVG-PNG, allowing to download PNG & SVG icons of fontawesome.io/icons

License

• This repo's License: GPL 3.0 License
• neilorangepeel/Free-Social-Icons : GPL 3.0 License
• encharm/Font-Awesome-SVG-PNG : MIT License
• fontawesome.io/icons : SIL OFL 1.1 License

Related and Similar projects

Here you can find similar projects that may interest yout when working with icons:

• ladjs/font-awesome-assets. npm package that allows you to create svg and img HTML tags of the fontawesome icons and apply customizations in the color and opacity of the icon. Examples:

The icons

Below I will be listing all the icons that we've got currently available. Just copy/pase the CSS located at the CSS code colum in your CSS stylesheet and create an HTML element (usually you will be using <i></i>) with the CSS class name of the CSS class name column.

You can modify the width and height of the icon modifying those properties in the CSS code; default they are width: 30px and height: 30px.

Lists:

• Social media icons list
• Fontawesome black icons list

Social media icons list

Source: neilorangepeel/Free-Social-Icons

Icon	CSS class name	CSS code	Preview	Format
android	android-svg-icon	android svg		SVG
apple	apple-svg-icon	apple svg		SVG
...	...	...	...	...

See the full list

Fontawesome black icons list

Source: encharm/Font-Awesome-SVG-PNG.

Icon	CSS class name	CSS code	Preview	Format
500px	500px-icon	500px		PNG
address-book-o	address-book-o-icon	address-book-o		PNG
address-book	address-book-icon	address-book		PNG
address-card-o	address-card-o-icon	address-card-o		PNG
address-card	address-card-icon	address-card		PNG
...	...	...	...	...

See the full list

Fontawesome white icons list

Source: encharm/Font-Awesome-SVG-PNG.

Icon	CSS class name	CSS code	Preview	Format
...	...	...	...	...