diff --git a/src/static/css/fontawesome-etherpad.css b/src/static/css/fontawesome-etherpad.css
new file mode 100644
index 000000000..13f28f2bf
--- /dev/null
+++ b/src/static/css/fontawesome-etherpad.css
@@ -0,0 +1,76 @@
+@font-face {
+ font-family: 'fontawesome-etherpad';
+ src: url('../font/fontawesome-etherpad.eot?81419457');
+ src: url('../font/fontawesome-etherpad.eot?81419457#iefix') format('embedded-opentype'),
+ url('../font/fontawesome-etherpad.woff?81419457') format('woff'),
+ url('../font/fontawesome-etherpad.ttf?81419457') format('truetype'),
+ url('../font/fontawesome-etherpad.svg?81419457#fontawesome-etherpad') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ @font-face {
+ font-family: 'fontawesome-etherpad';
+ src: url('../font/fontawesome-etherpad.svg?81419457#fontawesome-etherpad') format('svg');
+ }
+}
+*/
+
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+ font-family: "fontawesome-etherpad";
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+
+ display: inline-block;
+ text-decoration: inherit;
+ width: 1em;
+ margin-right: .2em;
+ text-align: center;
+ /* opacity: .8; */
+
+ /* For safety - reset parent styles, that can break glyph codes*/
+ font-variant: normal;
+ text-transform: none;
+
+ /* fix buttons height, for twitter bootstrap */
+ line-height: 1em;
+
+ /* Animation center compensation - margins should be symmetric */
+ /* remove if not needed */
+ margin-left: .2em;
+
+ /* you can be more comfortable with increased icons size */
+ /* font-size: 120%; */
+
+ /* Uncomment for 3D effect */
+ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-users:before { content: '\e800'; } /* '' */
+.icon-star:before { content: '\e801'; } /* '' */
+.icon-cog:before { content: '\e802'; } /* '' */
+.icon-bold:before { content: '\e803'; } /* '' */
+.icon-italic:before { content: '\e804'; } /* '' */
+.icon-indent-left:before { content: '\e805'; } /* '' */
+.icon-indent-right:before { content: '\e806'; } /* '' */
+.icon-list-bullet:before { content: '\e807'; } /* '' */
+.icon-list-numbered:before { content: '\e808'; } /* '' */
+.icon-strike:before { content: '\e809'; } /* '' */
+.icon-underline:before { content: '\e80a'; } /* '' */
+.icon-cw:before { content: '\e80b'; } /* '' */
+.icon-ccw:before { content: '\e80c'; } /* '' */
+.icon-clock:before { content: '\e80d'; } /* '' */
+.icon-eye-off:before { content: '\e80e'; } /* '' */
+.icon-eye:before { content: '\e80f'; } /* '' */
+.icon-play:before { content: '\e810'; } /* '' */
+.icon-fast-bw:before { content: '\e811'; } /* '' */
+.icon-fast-fw:before { content: '\e812'; } /* '' */
+.icon-pause:before { content: '\e813'; } /* '' */
+.icon-glass:before { content: '\e814'; } /* '' */
+.icon-code:before { content: '\e815'; } /* '' */
+.icon-exchange:before { content: '\e816'; } /* '' */
+.icon-chat:before { content: '\e817'; } /* '' */
\ No newline at end of file
diff --git a/src/static/css/pad.css b/src/static/css/pad.css
index 309eb8331..599b9fd41 100644
--- a/src/static/css/pad.css
+++ b/src/static/css/pad.css
@@ -669,64 +669,68 @@ table#otheruserstable {
.buttonicon {
width: 16px;
height: 16px;
- background-image: url('../../static/img/etherpad_lite_icons.png');
- background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
+
+ font-family: "fontawesome-etherpad";
+ font-size: 15px;
+ font-style: normal;
+ font-weight: normal;
+ color: #666;
}
-.buttonicon-bold {
- background-position: 0px -116px
+.buttonicon-bold:before {
+ content: "\e803";
}
-.buttonicon-italic {
- background-position: 0px 0px
+.buttonicon-italic:before {
+ content: "\e804";
}
-.buttonicon-underline {
- background-position: 0px -236px
+.buttonicon-underline:before {
+ content: "\e80a";
}
-.buttonicon-strikethrough {
- background-position: 0px -200px
+.buttonicon-strikethrough:before {
+ content: "\e809";
}
-.buttonicon-insertorderedlist {
- background-position: 0px -477px
+.buttonicon-insertorderedlist:before {
+ content: "\e808";
}
-.buttonicon-insertunorderedlist {
- background-position: 0px -34px
+.buttonicon-insertunorderedlist:before {
+ content: "\e807";
}
-.buttonicon-indent {
- background-position: 0px -52px
+.buttonicon-indent:before {
+ content: "\e806";
}
-.buttonicon-outdent {
- background-position: 0px -134px
+.buttonicon-outdent:before {
+ content: "\e805";
}
-.buttonicon-undo {
- background-position: 0px -255px
+.buttonicon-undo:before {
+ content: "\e80c";
}
-.buttonicon-redo {
- background-position: 0px -166px
+.buttonicon-redo:before {
+ content: "\e80b";
}
-.buttonicon-clearauthorship {
- background-position: 0px -86px
+.buttonicon-clearauthorship:before {
+ content: "\e80e";
}
-.buttonicon-settings {
- background-position: 0px -436px
+.buttonicon-settings:before {
+ content: "\e802";
}
-.buttonicon-import_export {
- background-position: 0px -68px
+.buttonicon-import_export:before {
+ content: "\e816";
}
-.buttonicon-embed {
- background-position: 0px -18px
+.buttonicon-embed:before {
+ content: "\e815";
}
-.buttonicon-history {
- background-position: 0px -218px
+.buttonicon-history:before {
+ content: "\e80d";
}
-.buttonicon-chat {
- background-position: 0px -102px;
+.buttonicon-chat:before {
+ content: "\e817";
}
-.buttonicon-showusers {
- background-position: 0px -183px;
+.buttonicon-showusers:before {
+ content: "\e800";
}
-.buttonicon-savedRevision {
- background-position: 0px -493px
+.buttonicon-savedRevision:before {
+ content: "\e801";
}
#focusprotector {
z-index: 100;
@@ -838,7 +842,7 @@ input[type=checkbox] {
border-left: 1px solid #ccc !important;
width: 185px !important;
}
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 600px) {
.toolbar ul li.separator {
display: none;
}
@@ -856,7 +860,7 @@ input[type=checkbox] {
left:0px;
right:0px;
color:#000;
- }
+ }
.gritter-close {
display:block !important;
left: auto !important;
@@ -884,13 +888,13 @@ input[type=checkbox] {
.gritter-item-wrapper > div{
background: none;
}
- #editorcontainer {
+ #editorcontainer {
top: 68px;
}
- #editbar {
+ #editbar {
height: 62px;
}
- .toolbar ul.menu_right {
+ .toolbar ul.menu_right {
float: left;
margin-top:2px;
}
diff --git a/src/static/font/fontawesome-etherpad.eot b/src/static/font/fontawesome-etherpad.eot
new file mode 100644
index 000000000..9a24fc67b
Binary files /dev/null and b/src/static/font/fontawesome-etherpad.eot differ
diff --git a/src/static/font/fontawesome-etherpad.svg b/src/static/font/fontawesome-etherpad.svg
new file mode 100644
index 000000000..ba49c31c2
--- /dev/null
+++ b/src/static/font/fontawesome-etherpad.svg
@@ -0,0 +1,35 @@
+
+
+
\ No newline at end of file
diff --git a/src/static/font/fontawesome-etherpad.ttf b/src/static/font/fontawesome-etherpad.ttf
new file mode 100644
index 000000000..a179bd191
Binary files /dev/null and b/src/static/font/fontawesome-etherpad.ttf differ
diff --git a/src/static/font/fontawesome-etherpad.woff b/src/static/font/fontawesome-etherpad.woff
new file mode 100644
index 000000000..1015d8e29
Binary files /dev/null and b/src/static/font/fontawesome-etherpad.woff differ
diff --git a/src/templates/pad.html b/src/templates/pad.html
index a4366bd5a..15fd45e2d 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -40,6 +40,7 @@
<% e.begin_block("styles"); %>
+