mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-24 01:16:15 -04:00
Add a subset of FontAwesome icons using Fontello
Most of the code here has been taken from @LaKing's #2554. Only icons required for etherpad have been added. Here is a list of the code points that are being used: 0xe800 0xe801 0xe802 0xe803 0xe804 0xe805 0xe806 0xe807 0xe808 0xe809 0xe80a 0xe80b 0xe80c 0xe80d 0xe80e 0xe80f 0xe810 0xe811 0xe812 0xe813 0xe814 0xe815 0xe816 0xe817 Their related icon names can be seen in: /src/static/css/fontawesome-etherpad.css Even though this patch *adds* all the required icons it only uses them in the in toolbar. The switch to using only FontAwesome icons and the removal of old PNG files will only happen after the timeslider interface has been updated. This is the first step for #2253
This commit is contained in:
Prateek Saxena
parent
743eaff202
commit
ca32ac89b6
7 changed files with 159 additions and 43 deletions
76
src/static/css/fontawesome-etherpad.css
Normal file
76
src/static/css/fontawesome-etherpad.css
Normal file
|
|
@ -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'; } /* '' */
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue