Skip to content

Easy local icons in HTML - do not import external CSS

License

Notifications You must be signed in to change notification settings

Dellos7/local-icons

Repository files navigation

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

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

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: amazon instagram taxi whatsapp

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

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