Topic on Skin talk:Citizen

When using the delivered Visual Editor extension together with Citizen, any paragraph shows the known pencil icon (for editing in wikitext). Left from it, a lettering 'edit' is displayed and leads to the visual editor.

It would be much preferable, if next to the pencil, there would be the 'eye' icon from Visual Editor shown next to the pencil instead of the letters. In german language for example, 'edit' is translated to 'bearbeiten', which is a long word and clutters the optics quite a bit and does not really fit to your clear and uncluttered skin.

Possible? TIA!

ATM, the source code looks like this:

<h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=MyArticle&amp;veaction=edit&amp;section=3" class="Array mw-editsection-visualeditor" title="Edit section: MySection">edit</a><span class="mw-editsection-divider"> | </span><a href="/index.php?title=MyArticle&amp;action=edit&amp;section=3" class="citizen-editsection-icon mw-ui-icon-wikimedia-edit" title="Edit section's source code: MySection">edit source</a><span class="mw-editsection-bracket">]</span></span>

I think I solved this myself. Add this to MediaWiki:Citizen.css:

.mw-editsection-visualeditor { width: 1.875rem; height: 1.875rem; text-indent: -9999px; opacity: var(--opacity-icon-base); transition: var(--transition-hover); transition-property: opacity; background-image: url(data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="grey"%3E%3Ctitle%3E eye %3C/title%3E%3Cpath d="M10 14.5a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5zM10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7z"/%3E%3Ccircle cx="10" fill="grey" cy="10" r="2.5"/%3E%3C/svg%3E); background-repeat: no-repeat; background-position: center; display: block; background-size: 1.125rem; }