<div class="icon-row"> <div class="preview-icon"><span class="step size-12"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-14"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-16"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-18"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-21"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-24"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-32"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-48"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-64"> <i class="icon {{prefix}}{{name}}"></i> </span><span class="step size-96"> <i class="icon {{prefix}}{{name}}"></i> </span> </div> <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div> <div class="usage"> <label>Classname:</label> <input class="name" type="text" readonly="readonly" onClick="this.select();" value="{{prefix}}{{name}}" /> <label>Selectable:</label> <span class="ion">{{html_code}}</span> <label>Escaped HTML:</label> <input class="html" type="text" readonly="readonly" onClick="this.select();" value="{{escaped_html_code}}" /> <label>CSS Content:</label> <input class="css" type="text" readonly="readonly" onClick="this.select();" value="{{css_code}}" /> </div> </div>