Just noticed the broken/missing editor icons - used to be just fine a week or so ago.
Using the Dark theme and FF.
The same is with the Light theme
Since 2018, Discourse has used Font Awesome 5 and is now transitioning to Font Awesome 6. That transition might be the culprit:
I’ve noticed frequent GitHub commits related to this, but I’ll dig in and see if I can come up with a workaround until Discourse fully sorts it out.
Edit: I copied the HTML element from the browser developer console, and pasted below:
Editor Tool Bar HTML Elements
<div class="d-editor-button-bar" role="toolbar">
<!---->
<button class="btn no-text btn-icon quote" tabindex="0" title="Quote whole post" type="button">
<svg class="fa d-icon d-icon-far-comment svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-comment"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon bold" tabindex="-1" title="Strong (⌘b)" type="button">
<svg class="fa d-icon d-icon-bold svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#bold"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon italic" tabindex="-1" title="Emphasis (⌘i)" type="button">
<svg class="fa d-icon d-icon-italic svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#italic"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon underline_button" tabindex="-1" title="Underline" type="button">
<svg class="fa d-icon d-icon-underline svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#underline"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon strikethrough_button" tabindex="-1" title="Strike-through" type="button">
<svg class="fa d-icon d-icon-strikethrough svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#strikethrough"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon inline_button" tabindex="-1" title="ICode" type="button">
<svg class="fa d-icon d-icon-terminal svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#terminal"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon code_button" tabindex="-1" title="Code" type="button">
<svg class="fa d-icon d-icon-laptop-code svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#laptop-code"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon noparse_button" tabindex="-1" title="No Parse" type="button">
<svg class="fa d-icon d-icon-ban svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#ban"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon noparseinline_button" tabindex="-1" title="Inline No Parse" type="button">
<svg class="fa d-icon d-icon-not-equal svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#not-equal"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon link" tabindex="-1" title="Hyperlink (⌘k)" type="button">
<svg class="fa d-icon d-icon-link svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#link"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon blockquote" tabindex="-1" title="Blockquote (⌘⇧9)" type="button">
<svg class="fa d-icon d-icon-quote-right svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#quote-right"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon code" tabindex="-1" title="Preformatted text (⌘e)" type="button">
<svg class="fa d-icon d-icon-code svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#code"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon upload" tabindex="-1" title="Upload" type="button">
<svg class="fa d-icon d-icon-upload svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#upload"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon bullet" tabindex="-1" title="Bulleted List (⌘⇧8)" type="button">
<svg class="fa d-icon d-icon-list-ul svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#list-ul"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon list" tabindex="-1" title="Numbered List (⌘⇧7)" type="button">
<svg class="fa d-icon d-icon-list-ol svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#list-ol"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon emoji insert-composer-emoji" tabindex="-1" title="Emoji :)" type="button">
<svg class="fa d-icon d-icon-face-smile svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#face-smile"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon local-dates" tabindex="-1" title="Insert date / time (⌘⇧.)" type="button">
<svg class="fa d-icon d-icon-calendar-days svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#calendar-days"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon align_center_button" tabindex="-1" title="Center" type="button">
<svg class="fa d-icon d-icon-align-center svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#align-center"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon align_right_button" tabindex="-1" title="Align right" type="button">
<svg class="fa d-icon d-icon-align-right svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#align-right"></use></svg> <span aria-hidden="true">
</span>
</button>
<button class="btn no-text btn-icon align_justify_button" tabindex="-1" title="Justify" type="button">
<svg class="fa d-icon d-icon-align-justify svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#align-justify"></use></svg> <span aria-hidden="true">
</span>
</button>
<details id="ember78" class="select-kit single-select dropdown-select-box toolbar-popup-menu-options is-expanded ember-view options" open=""> <summary aria-label="Select a value to filter" name="Select a value to filter" data-name="" tabindex="-1" role="listbox" id="ember78-header" class="select-kit-header single-select-header dropdown-select-box-header btn no-text btn-icon ember-view"><div class="select-kit-header-wrapper">
<svg class="fa d-icon d-icon-gear svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#gear"></use></svg>
<!---->
<!---->
</div></summary>
<div id="ember78-body" class="select-kit-body ember-view" style="position: fixed; min-width: 220px; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(174.375px, -239.375px, 0px);" data-popper-placement="top-start">
<div id="ember78-filter" class="select-kit-filter ember-view">
<!----> </div>
<!---->
<ul class="select-kit-collection" aria-live="polite" role="menu">
<li data-guid="ember88" aria-checked="false" role="menuitemradio" data-index="0" data-name="toggle-spreadsheet" data-value="[object Object]" title="toggle-spreadsheet" tabindex="0" id="ember87" class="select-kit-row dropdown-select-box-row ember-view">
<div class="icons">
<span class="selection-indicator"></span>
<svg class="fa d-icon d-icon-table svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#table"></use></svg>
</div>
<div class="texts">
<span class="name">Insert Table</span>
<!----> </div>
</li>
<li data-guid="ember90" aria-checked="false" role="menuitemradio" data-index="1" data-name="Hide Details" data-value="[object Object]" title="Hide Details" tabindex="0" id="ember89" class="select-kit-row dropdown-select-box-row ember-view">
<div class="icons">
<span class="selection-indicator"></span>
<svg class="fa d-icon d-icon-caret-right svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#caret-right"></use></svg>
</div>
<div class="texts">
<span class="name">Hide Details</span>
<!----> </div>
</li>
<li data-guid="ember92" aria-checked="false" role="menuitemradio" data-index="2" data-name="Add footnote" data-value="[object Object]" title="Add footnote" tabindex="0" id="ember91" class="select-kit-row dropdown-select-box-row ember-view">
<div class="icons">
<span class="selection-indicator"></span>
<svg class="fa d-icon d-icon-asterisk svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#asterisk"></use></svg>
</div>
<div class="texts">
<span class="name">Add footnote</span>
<!----> </div>
</li>
<li data-guid="ember94" aria-checked="false" role="menuitemradio" data-index="3" data-name="Build Poll" data-value="[object Object]" title="Build Poll" tabindex="0" id="ember93" class="select-kit-row dropdown-select-box-row ember-view">
<div class="icons">
<span class="selection-indicator"></span>
<svg class="fa d-icon d-icon-chart-bar svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#chart-bar"></use></svg>
</div>
<div class="texts">
<span class="name">Build Poll</span>
<!----> </div>
</li>
<li data-guid="ember96" aria-checked="false" role="menuitemradio" data-index="4" data-name="Blur Spoiler" data-value="[object Object]" title="Blur Spoiler" tabindex="0" id="ember95" class="select-kit-row dropdown-select-box-row ember-view">
<div class="icons">
<span class="selection-indicator"></span>
<svg class="fa d-icon d-icon-wand-magic svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#wand-magic"></use></svg>
</div>
<div class="texts">
<span class="name">Blur Spoiler</span>
<!----> </div>
</li>
<li data-guid="ember98" aria-checked="false" role="menuitemradio" data-index="5" data-name="Float left" data-value="[object Object]" title="Float left" tabindex="0" id="ember97" class="select-kit-row dropdown-select-box-row ember-view">
<div class="icons">
<span class="selection-indicator"></span>
<svg class="fa d-icon d-icon-indent svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#indent"></use></svg>
</div>
<div class="texts">
<span class="name">Float left</span>
<!----> </div>
</li>
<li data-guid="ember100" aria-checked="false" role="menuitemradio" data-index="6" data-name="Columns" data-value="[object Object]" title="Columns" tabindex="0" id="ember99" class="select-kit-row dropdown-select-box-row is-highlighted ember-view">
<div class="icons">
<span class="selection-indicator"></span>
<svg class="fa d-icon d-icon-columns svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#columns"></use></svg>
</div>
<div class="texts">
<span class="name">Columns</span>
<!----> </div>
</li>
</ul>
<!---->
</div>
</details>
</div>
OK — I found the issue. It was caused by an old fork of the “MD Composer Extras” Theme Component that I had customized a long time ago.
Since Discourse has made changes upstream, that forked code was OBE. I’ve now disabled it and installed the official version. Everything works normally again (though a few of our custom tweaks are missing):
See:
Note:
If you notice any missing editor buttons you liked, let me know — I’ll fork the latest official version and reapply the custom changes.
Note:
According to our forked version:
Added by Neo (Desktop):
icode (inline)
code (block, text highlighting)
noparse (block)
noparse (inline).
Added by Neo (Mobile):
icode (inline)
code (block, text highlighting).
Do I need to fork the repo and add them back again?
Let me know!
Thanks
Personal Note: I only type Markdown directly, so I rarely use these buttons. Back in the old days, we all used BBCode, but now it’s all the "far superior" Markdown — so apologies for neglecting this 6-year-old fork!
Heya Tim,
thanks for the quick turn around - appreciate it!
yeah, I tend to put my own Markdown tags, but sometime I get really lazy (comes with age).
I think having back the missing icons (code, icode, noparse - at least) would also help help the newbies with the proper post formatting as well (without explaining the intricacies of Markdown).
here's what Composer icon row used to look like:
Thanks again.
The icons in the editor are all visible again, thanks.
The text in the middle window is still cut off on my mini mobile (in Chrome and Duckduckgo browsers. But is okay on a larger mobile phone). I have switched to the Minima scheme, where text is wrapped correctly. This setting I could save for the mini device only; other devices continue with the Jet Cockpit.