I've very recently moved to Plone5 and notice that the icons seem to have gone awry in the editor (image attached). For example, a telephone received icon represents 'bold font', and a telephone is the 'remove link' function.
I'd welcome any ideas on how to fix.
thanks,
Richard
Plone 5.0.5 on Centos 6.8
It looks like your page is using the wrong font for the toolbar icons. AFAICT, this is not normal and not something that is likely to be found in a newly created, stock Plone 5.
Please use the DOM inspection tools of your browser and report back what font-family is used to style the .mce-ico class selector, what browser you are using, and what add-ons you are using.
Sean
Here are some details:
My addons (note that the default theme is installed):
Available add-ons
Archetypes Content Types for Plone
– (Products.ATContentTypes)
Sunrain Theme
Extension profile for Quintagroup Diazo theme for Plone. – (quintagroup.theme.sunrain)
plonetheme.modernbase
Installs the plonetheme.modernbase add-on. – (plonetheme.modernbase)
Session refresh support
Optional plone.session refresh support. – (plone.session)
plonetheme.clean_blog
Installs the plonetheme.clean_blog add-on. – (plonetheme.clean_blog)
plonetheme.future_imperfect
Installs the plonetheme.future_imperfect add-on. – (plonetheme.future_imperfect)
plonetheme.spot
Installs the plonetheme.spot add-on. – (plonetheme.spot)
archetypes.multilingual
Multilingual support for Archetypes – (archetypes.multilingual)
Workflow Policy Support (CMFPlacefulWorkflow)
Add in Plone the capability to change workflow chains for types in every object. Includes a dependency on core Plone types. – (Products.CMFPlacefulWorkflow)
plonetheme.business_casual
Installs the plonetheme.business_casual add-on. – (plonetheme.business_casual)
OpenID Authentication Support
Adds support for authenticating with OpenID credentials in a Plone site – (plone.app.openid)
Working Copy Support (Iterate)
Adds working copy support (aka. in-place staging) to Plone. – (plone.app.iterate)
plonetheme.booster
Installs the plonetheme.booster add-on. – (plonetheme.booster)
Activated add-ons
plone.app.multilingual
Install to enable multilingual content support – (plone.app.multilingual)
My set up:
Plone 5.0.5 installed in a Centos 6.8 Vmware guest. Firefox details below are from within the guest. The previous image in the earlier post was from Chrome on the host OS (Version 51.0.2704.79 Built on Ubuntu 14.04, running on LinuxMint 17.1 (64-bit)). All editor icons in Firefox in the guest OS are all squares.
From the developer tool in Firefox ESR 45.0.1 (in Centos 6.8).
aria-label="Decrease indent" role="button" id="mceu_11" class="mce-widget mce-btn" tabindex="-1"
aria-labelledby="mceu_11"
button role="presentation" type="button" tabindex="-1"i
class="mce-ico mce-i-outdent"
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-outdent"></i></button>
element {
}
.mce-btn button {
padding: 4px 8px;
font-size: 14px;
line-height: 20px;
*line-height: 16px;
cursor: pointer;
color: #333333;
text-align: center;
overflow: visible;
-webkit-appearance: none;
}
.mce-widget button {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
background: transparent;
text-decoration: none;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: normal;
text-align: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
.standalone, [type="submit"], button {
color: #4d4d4d;
background-color: #e5e5e5;
border-color: #b2b2b2;
}
.standalone, .context, .destructive, [type="submit"], button {
display: inline-block;
margin-bottom: 0;
font-weight: 700;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button, select {
text-transform: none;
}
button {
overflow: visible;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
element {
}
.mce-btn button {
padding: 4px 8px;
font-size: 14px;
line-height: 20px;
*line-height: 16px;
cursor: pointer;
color: #333333;
text-align: center;
overflow: visible;
-webkit-appearance: none;
}
.mce-widget button {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
background: transparent;
text-decoration: none;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: normal;
text-align: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
.standalone, [type="submit"], button {
color: #4d4d4d;
background-color: #e5e5e5;
border-color: #b2b2b2;
}
.standalone, .context, .destructive, [type="submit"], button {
display: inline-block;
margin-bottom: 0;
font-weight: 700;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button, select {
text-transform: none;
}
button {
overflow: visible;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
You will want to check font-family for i.mce-ico within any button:
The fact that Firefox is showing empty squares is a good indication that the tinymce font is not loading, or that it is not referenced in CSS.
Sean
It also occurred to me that this might be the fault of your theme. Try disabling the theme and using barceloneta (default theme) for the moment, to see if that corrects the issue.
Sean
Slightly unrelated:
Be aware that some systems uses IDs for fonts, so if you have a bad (home-made) font, it can render instead of the 'real font'. In this case, it will probably show in other programs (but not always, as some do not accept certain formats (ttf, postscript etc).
I created a second plone instance and the editor now seems fine. Not sure what happened in the first. Cheers.