>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3254213. --> Reported by: [will kirchheimer](https://www.drupal.org/user/112597) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>We need to add additional html elements to the markup in order to support icon button theming.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Add span and labels to the module.</p> <p>If we change from :</p> <pre>&lt;input class="feedback-btn feedback-btn__no button js-form-submit form-submit form-control" data-node-id="5508" data-feedback="no" type="submit" name="op" value="No"&gt;</pre><p>To:</p> <pre>&lt;span class="feedback-no-button"&gt;<br>&nbsp; &lt;input class="feedback-btn feedback-btn__no button js-form-submit form-submit form-control" id="feedback-no-button-5508" data-node-id="5508" data-feedback="no" type="submit" name="op" value="No"&gt;<br>&nbsp; &lt;label for="feedback-no-button-5508"&gt;&lt;/label&gt;<br>&lt;/span&gt;</pre><p>Then we get to add CSS in our theme to achieve goals like:</p> <pre>#feedback-message {<br>&nbsp; #upper-feedback-content {<br><br><br>&nbsp;&nbsp;&nbsp; .feedback-yes-button::before{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: "Font Awesome 5 Free";<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 400;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: "\f164";<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: blue;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 32px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center;<br>&nbsp;&nbsp;&nbsp; }<br><br>&nbsp;&nbsp;&nbsp; .feedback-no-button::before{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: "Font Awesome 5 Free";<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: 400;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: "\f165";<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: blue;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 32px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center;<br>&nbsp;&nbsp;&nbsp; }<br><br>&nbsp;&nbsp;&nbsp; .feedback-btn__no, .feedback-btn__yes{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display:none;<br>&nbsp;&nbsp;&nbsp; }<br>&nbsp; }<br>}<br><br><br><br>.feedback-yes-button{<br>&nbsp; label {<br>&nbsp;&nbsp;&nbsp; padding-left: 20px;<br>&nbsp;&nbsp;&nbsp; width: 50px;<br>&nbsp;&nbsp;&nbsp; height: 50px;<br>&nbsp;&nbsp;&nbsp; top: -50px;<br>&nbsp;&nbsp;&nbsp; z-index: 1000;<br>&nbsp;&nbsp;&nbsp; position: relative;<br>&nbsp;&nbsp;&nbsp; cursor: pointer;<br>&nbsp; }<br><br>}<br>.feedback-no-button{<br>&nbsp; label {<br>&nbsp;&nbsp;&nbsp; padding-left: 20px;<br>&nbsp;&nbsp;&nbsp; width: 50px;<br>&nbsp;&nbsp;&nbsp; height: 50px;<br>&nbsp;&nbsp;&nbsp; top: -50px;<br>&nbsp;&nbsp;&nbsp; z-index: 1000;<br>&nbsp;&nbsp;&nbsp; position: relative;<br>&nbsp;&nbsp;&nbsp; cursor: pointer;<br>&nbsp; }<br>}<br><br>.feedback-yes-button{<br>&nbsp; display: inline-grid;<br>&nbsp; height: 50px;<br>&nbsp; width: 50px;<br>}<br>.feedback-no-button{<br>&nbsp; display: inline-grid;<br>&nbsp; height: 50px;<br>&nbsp; width: 50px;<br>&nbsp; margin-left: 20px;<br>}</pre><p>Allowing the presentation of the Vote Buttons to move from:</p> <p><img src="https://www.drupal.org/files/issues/2021-12-13/UnThemedYesNo.png" alt="Unthemed Yes No buttons"></p> <p>To:</p> <p><img src="https://www.drupal.org/files/issues/2021-12-13/ThemedYesNo.png" alt="themed Yes No buttons"></p>