WackoWiki: Icons

https://wackowiki.org/doc     Version: 3 (03/28/2017 11:57)

Icons


1. wiki link icons

  1. external link
  2. user link
  3. group link
  4. file link
  5. mailto:
  6. xmpp:

CSS 
/* Wiki links: SYNTAX (prefix://) */

span.icon{
/* 	background-size: 16px 16px;	*/

	/* ! required for span width -> inline element */
	display: inline-block;
	height: 16px;
	width: 0px; 
	vertical-align: text-bottom; /* middle */
}

a.external-link .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/web.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a.group-link .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/group.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a.user-link .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/user.svg") no-repeat scroll left center;
	padding-left: 17px;
}

a.file-link .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/file.svg") no-repeat scroll left center;
	padding-left: 17px;
}

a[href^="htts://"] .icon,
a[href^="http://"] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/web.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href^="mailto:"] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/mail.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href^="xmpp:"] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/jabber.svg") no-repeat scroll left center;
	padding-left: 17px;
}

2. access icons

  1. blocked
  2. restricted

CSS 
/* lockicon */
a.acl-denied .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/locked.svg") no-repeat scroll left center;
	padding-left: 17px;
}
/* keyicon */
a.acl-customsec .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/unlocked.svg") no-repeat scroll left center;
	padding-left: 17px;
}

3. mime type icons

  1. pdf (pdf)
  2. text (txt)
  3. document (odt)
  4. image (png, gif, jpg)
  5. archive (zip, tar, 7z, bz2, gz, tgz, rar, rpm)
  6. presentation (odp)
  7. audio (mp3, ogg, opus)
  8. spreadsheet (ods)
  9. signature (asc)
  10. drawing (odg, svg)
  11. video (webm, ogv, mp4)
  12. xml (rdf)

CSS 
/* mime */

a[href $='.pdf'] .icon {
background: rgba(0, 0, 0, 0) url("./../icon/pdf.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.txt'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/text.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.odt'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/document.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.gif'] .icon,
a[href $='.jpe'] .icon,
a[href $='.jpeg'] .icon,
a[href $='.jpg'] .icon,
a[href $='.png'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/image.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.rdf'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/xml.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.zip'] .icon,
a[href $='.7z'] .icon,
a[href $='.tar'] .icon,
a[href $='.bz2'] .icon,
a[href $='.gz'] .icon,
a[href $='.tgz'] .icon,
a[href $='.rar'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/archive.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.ods'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/spreadsheet.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.odp'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/presentation.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.odg'] .icon,
a[href $='.svg'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/drawing.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.mp3'] .icon,
a[href $='.ogg'] .icon,
a[href $='.opus'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/audio.svg") no-repeat scroll left center;
	padding-left: 17px;
}
a[href $='.mp4'] .icon,
a[href $='.ogv'] .icon,
a[href $='.webm'] .icon {
	background: rgba(0, 0, 0, 0) url("./../icon/video.svg") no-repeat scroll left center;
	padding-left: 17px;
}

4. theme icons

  1. print
  2. user
  3. group
  4. show
  5. edit
  6. rename
  7. ..

CSS 
#handler li.new img {
	background-image:url("./../icon/add_page.svg");
	background-repeat: no-repeat;
}
#handler li.categories img {
	background-image:url("./../icon/tag.svg");
	background-repeat: no-repeat;
}
#handler li.upload img {
	background-image:url("./../icon/attachment.svg");
	background-repeat: no-repeat;
}
#handler li.edit img {
	background-image:url("./../icon/edit.svg");
	background-repeat: no-repeat;
	/* background-size:10px 10px; */
}
#handler li.referrers img {
	background-image:url("./../icon/link.svg");
	background-repeat: no-repeat;
}
#handler li.revisions img {
	background-image:url("./../icon/revisions.svg");
	background-repeat: no-repeat;
}
#handler li.remove img {
	background-image: url("./../icon/delete_page.svg");
	background-repeat: no-repeat;
}
#handler li.rename img {
	background-image: url("./../icon/edit.svg");
	background-repeat: no-repeat;
}
#handler li.moderate img {
	background-image: url("./../icon/moderate.svg");
	background-repeat: no-repeat;
}
#handler li.properties img {
	background-image:url("./../icon/properties.svg");
	background-repeat: no-repeat;
}
#handler li.permissions img {
	background-image:url("./../icon/permission.svg");
	background-repeat: no-repeat;
}
#handler li.show img {
	background-image:url("./../icon/show.svg");
	background-repeat: no-repeat;
}
#handler li.moderate img {
	background-image:url("./../icon/comment.svg");
	background-repeat: no-repeat;
}
#handler li.print img {
	background-image:url("./../icon/print.svg");
	background-repeat: no-repeat;
}
#handler li.watch-off img {
	background-image: url("./../icon/watch-off.svg");
	background-repeat: no-repeat;
}
#handler li.watch-on img {
	background-image: url("./../icon/watch-on.svg");
	background-repeat: no-repeat;
}
#handler li.review1 img {
	background-image: url("./../icon/review1.svg");
	background-repeat: no-repeat;
}
#handler li.review2 img {
	background-image: url("./../icon/review2.svg");
	background-repeat: no-repeat;
}

.watch-off img,
.watch-on img {
	border:medium none;
	height:16px;
	width:16px;
}
.watch-off img {
	background-image: url("./../icon/watch-off.svg");
	background-repeat: no-repeat;
}
.watch-on img {
	background-image: url("./../icon/watch-on.svg");
	background-repeat: no-repeat;
}

.btn-reload {
	background-image: url('./../icon/reload.svg'), none;
	background-repeat: no-repeat;
	background-size: 22px 22px;
	height: 22px;
	width: 22px;
}
.btn-menu {
background-image: url('./../icon/menu.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-addbookmark {
background-image: url('./../icon/bookmark.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-removebookmark {
background-image: url('./../icon/remove.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-delete {
background-image: url('./../icon/delete.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-edit {
background-image: url('./../icon/edit.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-feed {
background-image: url('./../icon/feed.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-tick {
background-image: url('./../icon/tick.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-warning {
background-image: url('./../icon/warning.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-add_page {
background-image: url('./../icon/add_page.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-comment {
background-image: url('./../icon/comment.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-attachment {
background-image: url('./../icon/attachment.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-unlocked {
background-image: url('./../icon/unlocked.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}
.btn-locked {
background-image: url('./../icon/locked.svg'), none;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
}

5. WikiEdit icons

  1. H1 - H6
  2. bold
  3. italic
  4. underline
  5. strikethrough
  6. ..

CSS 
.toolbar li img {
	background-size: 22px 22px;
}
.toolbar li.we-h1 img {
	background-image:url("../../../image/wikiedit/h1.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-h2 img {
	background-image:url("../../../image/wikiedit/h2.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-h3 img {
	background-image:url("../../../image/wikiedit/h3.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-h4 img {
	background-image:url("../../../image/wikiedit/h4.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-h5 img {
	background-image:url("../../../image/wikiedit/h5.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-h6 img {
	background-image:url("../../../image/wikiedit/h6.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-bold img {
	background-image:url("../../../image/wikiedit/bold.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-italic img {
	background-image:url("../../../image/wikiedit/italic.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-underline img {
	background-image:url("../../../image/wikiedit/underline.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-strike img {
	background-image:url("../../../image/wikiedit/strike.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-ul img {
	background-image:url("../../../image/wikiedit/ul.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-ol img {
	background-image:url("../../../image/wikiedit/ol.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-center img {
	background-image:url("../../../image/wikiedit/center.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-justify img {
	background-image:url("../../../image/wikiedit/justify.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-right img {
	background-image:url("../../../image/wikiedit/right.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-outdent img {
	background-image:url("../../../image/wikiedit/outdent.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-indent img {
	background-image:url("../../../image/wikiedit/indent.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-hr img {
	background-image:url("../../../image/wikiedit/hr.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-signature img {
	background-image:url("../../../image/wikiedit/signature.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-quote img {
	background-image:url("../../../image/wikiedit/quote.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-source img {
	background-image:url("../../../image/wikiedit/source.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-code img {
	background-image:url("../../../image/wikiedit/code.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-createlink img {
	background-image:url("../../../image/wikiedit/link.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-createtable img {
	background-image:url("../../../image/wikiedit/table.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-textred img {
	background-image:url("../../../image/wikiedit/textcolor.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-highlightcolor img {
	background-image:url("../../../image/wikiedit/highlightcolor.svg");
	background-repeat: no-repeat;
}
.toolbar li.we-help img {
	background-image:url("../../../image/wikiedit/help.svg");
	background-repeat: no-repeat;
}


Links
  1. http://www.w3.org/TR/css3-selectors/
  2. https://inkscape.org/de/doc/tu[...]ial-advanced.de.html[link1]
  3. SVG Cleaner https://github.com/RazrFalcon/svgcleaner