Icons4Menu
This repository is a SVG images resource based on SVG icons JQuery Mobile 1.4.5 and extended with SVG icons from Wiki Commons. The icons are primary collected for menus in webbased application or for icons in buttons.
Usage of Icons4Menu - WebApps
Icons4Menu are generated for the Wikiversity Learning Resource about AppLSAC.
-
hamburger_menu_app
Icons in Hamburger Menus like hamburger_menu_app -
jsoneditor_app
Icons in JSON Editor WebApp in buttons - see jsoneditor_app
Download of Icons with a Script
The icons can be downloaded with a script:
- wget_icons.sh
- The download of icons for your WebApp (resp. AppLSAC) can be started from the shell command line with
sh ./wget_icons.sh
- the script call of wget_icons.sh downloads the SVG icons of this repository and it is equivalent to the script call:
sh ./wget_icons.sh svg
- if you want to download the PNG icons of the repository (JQuery Mobile 1.4.5 - CC0) you can call the script with the parameter
png
:
sh ./wget_icons.sh png
wget_icons.sh
Script
Update the Any time new icons are added to the repository icons4menu
the script wget_icons.sh
is updated as well, because the new icons are added to the list of wget
download commands in the script. There is an easy way to update the wget_icons.sh
script to the latest version by downloading the script update_wget_icons.sh
. If you want to use the update script, navigate to the folder in which you want to have the icons4menu
folder img/
and then download the script with:
wget https://niebert.github.io/icons4menu/update_wget_icons.sh
Please check the content of the script before executing, so that you are sure that the script does what you expect the script to (i.e. updating the script wget_icons.sh
). Then check the content of wget_icons.sh
. Performs the script the expected down or do you want to reduce the number of downloaded icons before executing the script wget_icons.sh
. If you are sure that the script download all the icons you need, perform the download operation by calling:
sh ./wget_icons.sh
json4icons.json
and json4icons.js
JSON file The JSON file json4icons.json
contains a list of all icons with
-
name
: filename, -
path
: the path to the icon, -
license
: the license information for the icon, -
raw
: available only for SVG (Scalable Vector Graphics) images.raw
contains the raw string content was added to the JSON. This was added for transparent encoding of the SVG and those developers that prefer to use the raw string format in XML for the image can use that. In a browser you can convert -
src
: is the base64 encoded data of the image as Data URL that can used in images in the DOM. The source us either theXML
source text of theSVG
image or the binary data as base64 encoded data of the image.
The file json4icons.js
is a library that populates a hash object vDataJSON
defined with var vDataJSON = {};
in the main HTML file that embeds the icons4menu
.
-
used
is boolean that can be set by an application to reduce the number of icons in the JSON data to the used icons. Set all used icons totrue
and remove all the unused icons from the JSON to reduce the size of the JSON especially for WebApps (see also AppLSAC on Wikiversity ).
json4icons.js
Example Icon Record in {
"name": "arrow-r-black.svg",
"path": "img/icons-svg",
"used": false,
"src": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0....",
"license": "CC0",
"group": "arrow",
"raw": "<?xml version=\"1.0\"...",
"wikicommons": "https://jquerymobile.com/download/"
}
The content in src
and raw
are shortend so that the record fits into this README page.
JSON File Icons4Menu
The repository contains also a JSON file with all icons of the repository. The JSON file json4icons.json
can be used to identify the used icons with NodeJS and delete the unused icons from your img/
folder of your WebApp to save disk space and reduce the size of your WebApp.
Even if you remove icons from your WebApp in the folder img/
you should keep the license file LICENSE_Jquery_Mobile.txt
, README.md
and README_Icons4Menu.html
in that repository for licensing information about the icons.
Preview All Icons4Menu
The listed icons below do not contain the JQuery Mobile 1.4.5 Icons. To preview all icons for navigation menus see
- Preview Icons4Menu
- Usage in Hamburger Menu - GitHub-Repo
- Learn about AppLSAC - This repository was developed for a Wikiversity learning resource. The
Added Icons from WikiCommons
The following icons are selected from the following SVG-Icons in Wiki Commons. For FontAwesome Icon survey see FontAwesome 4.7.0 for finding the appropriate icon file name.
Load, Save, Print, Cancel, Trash, Settings
Action and Processes
Arrow
Media
Other
Navigation
Medical
Icon | File | Folder | Source File | Licence | Group |
---|---|---|---|---|---|
heart-black.png |
img/icons-png |
JQ-heart-black.png | CC0 | medical | |
heart-white.png |
img/icons-png |
JQ-heart-white.png | CC0 | medical | |
heart-black.svg |
img/icons-svg |
JQ-heart-black.svg | CC0 | medical | |
heart-white.svg |
img/icons-svg |
JQ-heart-white.svg | CC0 | medical | |
heart.svg |
img/icons-svg |
JQ-heart.svg | CC0 | medical |
Device
Login
Editor
Audio Player
Products and Objects
Icon | File | Folder | Source File | Licence | Group |
---|---|---|---|---|---|
fa-book-black.svg |
img/icons-svg |
Book_font_awesome.svg | CC BY-SA 3.0 | product | |
fa-book-white.svg |
img/icons-svg |
Book_font_awesome.svg | CC BY-SA 3.0 | product | |
fa-book.svg |
img/icons-svg |
Book_font_awesome.svg | CC BY-SA 3.0 | product | |
fa-key-black.svg |
img/icons-svg |
Font_Awesome_5_solid_key.svg | CC BY-SA 3.0 | product | |
fa-key-white.svg |
img/icons-svg |
Font_Awesome_5_solid_key.svg | CC BY-SA 3.0 | product | |
fa-key.svg |
img/icons-svg |
Font_Awesome_5_solid_key.svg | CC BY-SA 3.0 | product | |
fa-picture-black.svg |
img/icons-svg |
Picture_font_awesome.svg | CC BY-SA 3.0 | product | |
fa-picture-white.svg |
img/icons-svg |
Picture_font_awesome.svg | CC BY-SA 3.0 | product | |
fa-picture.svg |
img/icons-svg |
Picture_font_awesome.svg | CC BY-SA 3.0 | product |
Filetype
Icon | File | Folder | Source File | Licence | Group |
---|---|---|---|---|---|
fa-file-archive-black.svg |
img/icons-svg |
Font_Awesome_5_regular_file-archive.svg | CC BY-SA 3.0 | filetype | |
fa-file-archive-white.svg |
img/icons-svg |
Font_Awesome_5_regular_file-archive.svg | CC BY-SA 3.0 | filetype | |
fa-file-archive.svg |
img/icons-svg |
Font_Awesome_5_regular_file-archive.svg | CC BY-SA 3.0 | filetype |
Vehicle
Icon | File | Folder | Source File | Licence | Group |
---|---|---|---|---|---|
fa-truck-black.svg |
img/icons-svg |
Truck_font_awesome.svg | CC BY-SA 3.0 | vehicle | |
fa-truck-white.svg |
img/icons-svg |
Truck_font_awesome.svg | CC BY-SA 3.0 | vehicle | |
fa-truck.svg |
img/icons-svg |
Truck_font_awesome.svg | CC BY-SA 3.0 | vehicle |
Save the icon with 14x14 pixel for width and height, so that the icon has a standard size for a menu if not additional size attributes are used in CSS or the img
-tag itself.
Style Sheets CSS for Icons
The spinner icon is static. You might expect the spinner icon fa-spinner.svg
to rotate. This can be accomplish with CSS class definition for a class icon-spin
:
- Add in your CSS file the following styles for the class
icon-spin
:
.icon-spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
- The you can make the icons rotate by adding the
icon-spin
classname to the icon:
<img class="icon-spin" src="img/icons-svg/fa-spinner.svg" alt="" width="20" height="20">
Scan Icons
Scan Shell Script for images
The shell script scan_icons.sh
scans all icons in the subdirectory img/
and creates and HTML file img/index.html
and a wget
download script, that can be modified for downloading a subset of the images.
wget_icons.sh
Shell Script The shell script wget_icons.sh
can be used to download a subset of images. In the provided default version it downloads all icons in this repository.
- This
README.md
will also be downloaded and stored inimg/README_Icons4Menu.html
. Please do not remove this file because it provides a reference to the origin of the files and the corresponding licenses. - The JQuery Mobile License is stored in
img/LICENSE_Jquery_Mobile.txt
. For JQuery Mobile license see fileLICENSE_Jquery_Mobile.txt
in the repositoryIcons4Menu
.
Use in other SVG Images in other repositories
The script update_wget_icons.sh
updates the script wget_icons.sh
from the repository icons4menu and replaces the script wget_icons.sh
. The script wget_icons.sh
can be used to download an updated version of the icons. Please modify the script according to your needs, to download just a subset for your AppLSAC.
If the repository icons4menu is expanded with more icons with a Creative Commons license, that it is recommended to update the download script wget_icons.sh
with the following commands:
sh ./update_wget_icons.sh
sh ./wget_icons.sh
The second command downloads the icons. You can help to minimize the GitHub server load by tailoring the script according to your needs.
If you want to check out an example repository on GitHub, that uses the Icons4Menu icons in an AppLSAC analyze the subdirectory img/
in hamburger_menu_app
.
Add License Info File
If you use the repository add this README.md file to the WebApp, so that users of web-based applications can identify the origin of the SVG and PNG icons. The repository incorporated SVG and PNG icons with two licenses:
- Creative Commons
CC Zero
- https://creativecommons.org/publicdomain/zero/1.0/deed.en - Creative Commons
CC BY-SA 3.0
- see https://creativecommons.org/licenses/by-sa/3.0/ with thefa-
as file attribution prefix.
Attribution for Files - File Prefix
If we consider the CC BY-SA 3.0
license provides the freedom to:
-
Share — copy and redistribute the material in any medium or format
-
Adapt — remix, transform, and build upon the material for any purpose, even commercially. These two freedoms are also provided for the license
CC Zero
. Furthermore for allCC BY-SA 3.0
licensed icons anattribution
and ashare alike
requirement is defined (see https://creativecommons.org/licenses/by-sa/3.0/): -
Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
-
ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
The JQuery Mobile 1.4.5 PNG and SVG icons in this repository (i.e. icons without fa-
prefix) do not require the "attribution", but it is recommended to provide attribution also to JQuery Mobile 1.4.5 with the CC Zero license for icons without the fa-
prefix. Especially for adding more icons in forks of the repository icons4menu
the prefix fa-
should also be used to distinguish CC Zero
licensed icons without fa-
prefix from CC BY-SA 3.0
licensed icon that need a file attribution
by adding the prefix fa-
in the filename.
icons4menu
with license prefix
More than 2 Licenses in Forks of If you have more than 2 licenses in your fork of icons4menu
you could add a license prefix for all icons, e.g.:
-
cc0-recycle.svg
forCC Zero
licensed icons from JQuery Mobile 1.4.5, -
cc3bysa-recycle.svg
forCC BY-SA 3.0
licensed icons from Wiki Commons, -
cc4by-recycle.svg
forCC BY 4.0
licensed icons e.g. from an additional source used in the fork oficons4menu
.
This allows users to identify the license of the file directly from the filename.