/
githubmirror
/
magento2
Обзор
Документация
Войти
/
githubmirror
/
magento2
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.4-develop
lib/web/css/docs/icons.html
850 строк
255 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:58
3d4f486
Код
Авторство
О чём код?
<!-- /** * Copyright 2014 Adobe * All Rights Reserved. */ --> <!DOCTYPE html><html><head><title>icons | Magento UI Library </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл] <p> Icons can be represented by using the fonts, images, or sprites.</p> <p> An icon can be added to any HTML tag. For this purpose you need to use additional <code><span></code> tag within your tag. This additional tag serves for displaying an icon without visible text, thus following the <strong>accessibility requirements</strong>. Then you need to apply appropriate <code>icon</code> mixin for this tag's class. Icon can be added both before and after element's text. Also, icon can be displayed instead of element's text (in this case the text is hidden).</p> <p> There are two ways to insert icon: first you can use <strong>sprite or image</strong>, second you can use <strong>an icon font</strong>. Magento UI library provides mixins for both of them.</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-1"><span>sprite icon before the text</span></a> <br> <a href="#" class="example-icon-2"><span>sprite icon after the text</span></a> <br> <a href="#" class="example-icon-3" title="sprite icon instead of the text"><span>icon instead of the text</span></a> <br> <a href="#" class="example-icon-4"><span>font icon before the text</span></a> <br> <a href="#" class="example-icon-5"><span>font icon after the text</span></a> <br> <a href="#" class="example-icon-6" title="font icon instead of the text"><span>icon instead of the text</span></a></textarea> </div><div class="code"><pre><code>.example-icon-1 { .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png'); } .example-icon-2 { .lib-icon-image( @_icon-image: '@{baseDir}images/blank-theme-icons.png', @_icon-image-position-x: -26px, @_icon-image-position-y: 0, @_icon-image-position: after ); } .example-icon-3 { .lib-icon-image( @_icon-image: '@{baseDir}images/blank-theme-icons.png', @_icon-image-position-x: -156px, @_icon-image-position-y: -52px, @_icon-image-text-hide: true ); } .example-icon-4 { .lib-icon-font( @_icon-font-content: @icon-settings, @_icon-font-size: 24px ); } .example-icon-5 { .lib-icon-font( @_icon-font-content: @icon-star, @_icon-font-size: 24px, @_icon-font-position: after ); } .example-icon-6 { .lib-icon-font( @_icon-font-content: @icon-flag, @_icon-font-size: 24px, @_icon-font-text-hide: true ); }</code></pre></div></article><article id="icon-with-image-or-sprite" class="section"><div class="docs"><a href="#icon-with-image-or-sprite" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="icon-with-image-or-sprite">Icon with image or sprite</h1> <p> the <code>.lib-icon-image()</code> mixin is used to create icons using single image or sprite. It has one mandatory parameter - <code>@_icon-image</code>. This parameter accepts the path to an image or sprite.</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-7"><span>icon-search</span></a></textarea> </div><div class="code"><pre><code>.example-icon-7 { .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png'); }</code></pre></div></article><article id="icon-with-image-or-sprite-variables" class="section"><div class="docs"><a href="#icon-with-image-or-sprite-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="icon-with-image-or-sprite-variables">Icon with image or sprite variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_icon-image</th> <td>-</td> <td class="vars_value">-</td> <td class="vars_value">'' | false | value</td> <td>A link to an image or sprite, mandatory parameter</td> </tr> <tr> <th>@_icon-image-height</th> <td>@icon__height</td> <td class="vars_value">26px</td> <td class="vars_value">'' | false | value</td> <td>Icon image height</td> </tr> <tr> <th>@_icon-image-width</th> <td>@icon__width</td> <td class="vars_value">26px</td> <td class="vars_value">'' | false | value</td> <td>Icon image width</td> </tr> <tr> <th>@_icon-image-margin</th> <td>@icon__margin</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Icon image margin</td> </tr> <tr> <th nowrap="nowrap">@_icon-image-vertical-align</th> <td>@icon__vertical-align</td> <td class="vars_value">middle</td> <td class="vars_value">'' | false | value</td> <td>Icon image vertical align</td> </tr> <tr> <th>@_icon-image-position-x</th> <td>@icon-image__position-x</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Horizontal image position</td> </tr> <tr> <th>@_icon-image-position-y</th> <td>@icon-image__position-y</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Vertical image position</td> </tr> <tr> <th>@_icon-image-position</th> <td>@icon__position</td> <td class="vars_value">before</td> <td class="vars_value">before | after</td> <td>Icon image position</td> </tr> <tr> <th>@_icon-image-text-hide</th> <td>@icon__text-hide</td> <td class="vars_value">false</td> <td class="vars_value">true | false</td> <td>The text in the <span> tag should be hidden</td> </tr> </table> </pre> </div></article><article id="icon-position-for-an-icon-with-image-or-sprite" class="section"><div class="docs"><a href="#icon-position-for-an-icon-with-image-or-sprite" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="icon-position-for-an-icon-with-image-or-sprite">Icon position for an icon with image or sprite</h1> <p> To change the position for icons with image the <code>.lib-icon-image-position()</code> mixin is used. By managing its <code>@_icon-image-position-x</code> and <code>@_icon-image-position-y</code> variables you can move the image on element's background. The <code>@_icon-image-position</code> variable is used to define the position of icon (before or after the element).</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-8"><span>icon-star</span></a> <br> <a href="#" class="example-icon-9"><span>icon-heart</span></a></textarea> </div><div class="code"><pre><code>.example-icon-8 { .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png'); .lib-icon-image-position( @_icon-image-position-x: -182px ); } .example-icon-9 { .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png', @_icon-image-position: after); .lib-icon-image-position( @_icon-image-position-x: -52px, @_icon-image-position-y: -26px, @_icon-image-position: after ); }</code></pre></div></article><article id="position-for-icon-with-image-or-sprite-mixin-variables" class="section"><div class="docs"><a href="#position-for-icon-with-image-or-sprite-mixin-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="position-for-icon-with-image-or-sprite-mixin-variables">Position for icon with image or sprite mixin variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_icon-image-position-x</th> <td>@icon-image__position-x</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Horizontal starting position of icon image</td> </tr> <tr> <th nowrap="nowrap">@_icon-image-position-y</th> <td>@icon-image__position-y</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Vertical starting position of icon image</td> </tr> <tr> <th>@_icon-image-position</th> <td>@icon__position</td> <td class="vars_value">before</td> <td class="vars_value">before | after</td> <td>Position of the icon which is set for the element</td> </tr> </table> </pre> </div></article><article id="icon-sprite-position-with-grid" class="section"><div class="docs"><a href="#icon-sprite-position-with-grid" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="icon-sprite-position-with-grid">Icon sprite position (with grid)</h1> <p> Mixin <code>.lib-icon-sprite-position()</code> is used to manage the position of sprite background image. It assumes the use of a single sprite image with individual images <strong>placed on a regular grid</strong>.</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-10"><span>icon text</span></a></textarea> </div><div class="code"><pre><code>.example-icon-10 { .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png'); .lib-icon-sprite-position(4, 0); }</code></pre></div></article><article id="icon-sprite-position-variables" class="section"><div class="docs"><a href="#icon-sprite-position-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="icon-sprite-position-variables">Icon sprite position variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_icon-sprite-position-x</th> <td>@icon-sprite__position-x</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>The x coordinate of the desired image on the grid</td> </tr> <tr> <th nowrap="nowrap">@_icon-sprite-position-y</th> <td>@icon-sprite__position-y</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>The y coordinate of the desired image on the grid</td> </tr> <tr> <th>@_icon-sprite-grid</th> <td>@icon-sprite__grid</td> <td class="vars_value">26px</td> <td class="vars_value">'' | false | value</td> <td>The size of the grid (in pixels) that the individal images are placed on</td> </tr> <tr> <th>@_icon-sprite-position</th> <td>@icon__position</td> <td class="vars_value">before</td> <td class="vars_value">before | after</td> <td>Icon image position</td> </tr> </table> </pre> </div></article><article id="imagesprite-icon-size" class="section"><div class="docs"><a href="#imagesprite-icon-size" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="imagesprite-icon-size">Image/sprite icon size</h1> <p> Mixin <code>.lib-icon-image-size()</code> is used to change the image/sprite icon size</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-11"><span>icon-search</span></a></textarea> </div><div class="code"><pre><code>.example-icon-11 { .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png'); .lib-icon-image-size(30px, 30px); &:before { background-color: #f1f1f1; } }</code></pre></div></article><article id="imagesprite-icon-size-variables" class="section"><div class="docs"><a href="#imagesprite-icon-size-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="imagesprite-icon-size-variables">Image/sprite icon size variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_icon-image-width</th> <td>@icon__width</td> <td class="vars_value">26px</td> <td class="vars_value">'' | false | value</td> <td>Icon image width</td> </tr> <tr> <th nowrap="nowrap">@_icon-image-height</th> <td>@icon__height</td> <td class="vars_value">26px</td> <td class="vars_value">'' | false | value</td> <td>Icon image height</td> </tr> <tr> <th>@_icon-image-position</th> <td>@icon__position</td> <td class="vars_value">before</td> <td class="vars_value">before | after</td> <td>Icon image position</td> </tr> </table> </pre> </div></article><article id="font-icon" class="section"><div class="docs"><a href="#font-icon" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="font-icon">Font icon</h1> <p> The <code>.lib-icon-font()</code> mixin is used to create icons using font icons. It has one mandatory parameter - <code>@_icon-font-content</code>. This parameter accepts the font icon code.</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-12"><span>icon-calendar</span></a></textarea> </div><div class="code"><pre><code>.example-icon-12 { .lib-icon-font( @icon-calendar, @_icon-font-size: 28px ); }</code></pre></div></article><article id="font-icon-variables" class="section"><div class="docs"><a href="#font-icon-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="font-icon-variables">Font icon variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_icon-font-content</th> <td>-</td> <td class="vars_value"> </td> <td class="vars_value">'' | icon code | icon variables</td> <td>Font icon code</td> </tr> <tr> <th nowrap="nowrap">@_icon-font</th> <td>@icon-font</td> <td class="vars_value">@icons__font-name</td> <td class="vars_value">'' | false | value</td> <td>The icon font</td> </tr> <tr> <th>@_icon-font-size</th> <td>@icon-font__size</td> <td class="vars_value">inherit</td> <td class="vars_value">'' | false | value</td> <td>Font icon size</td> </tr> <tr> <th>@_icon-font-line-height</th> <td>@icon-font__line-height</td> <td class="vars_value">@icon-font__size</td> <td class="vars_value">'' | false | value</td> <td>Font icon line height</td> </tr> <tr> <th nowrap="nowrap">@_icon-font-color</th> <td>@icon-font__color</td> <td class="vars_value">inherit</td> <td class="vars_value">'' | inherit | color code</td> <td>Font icon color</td> </tr> <tr> <th>@_icon-font-color-hover</th> <td>@icon-font__color-hover</td> <td class="vars_value">false</td> <td class="vars_value">'' | inherit | color code</td> <td>Font icon color - hover state</td> </tr> <tr> <th>@_icon-font-color-active</th> <td>@icon-font__color-active</td> <td class="vars_value">false</td> <td class="vars_value">'' | inherit | color code</td> <td>Font icon color - active state</td> </tr> <tr> <th nowrap="nowrap">@_icon-font-margin</th> <td>@icon-font__margin</td> <td class="vars_value">@icon__margin</td> <td class="vars_value">'' | false | value</td> <td>Font icon margin</td> </tr> <tr> <th nowrap="nowrap">@_icon-font-vertical-align</th> <td>@icon-font__vertical-align</td> <td class="vars_value" nowrap="nowrap">@icon__vertical-align</td> <td class="vars_value">'' | false | value</td> <td>Font icon vertical align</td> </tr> <tr> <th nowrap="nowrap">@_icon-font-position</th> <td>@icon-font__position</td> <td class="vars_value">@icon__position</td> <td class="vars_value">before | after</td> <td>Font icon position</td> </tr> <tr> <th>@_icon-font-text-hide</th> <td>@icon-font__text-hide</td> <td class="vars_value">@icon__text-hide</td> <td class="vars_value">true | false</td> <td>The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)</td> </tr> <tr> <th>@_icon-font-display</th> <td>@icon-font__display</td> <td class="vars_value">inline-block</td> <td class="vars_value">'' | false | value</td> <td>The 'display' property of the icon container</td> </tr> </table> </pre> </div></article><article id="change-the-size-of-font-icon" class="section"><div class="docs"><a href="#change-the-size-of-font-icon" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="change-the-size-of-font-icon">Change the size of font icon</h1> <p> The <code>.lib-icon-font-size()</code> mixin is used to change size of the font icon which is already defined. The mixin generates only new font size and line height without any other options. @_icon-font-position variable is used to define the position of icon (before or after the element) which we want to set font size of.</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-13"><span>icon-calendar</span></a></textarea> </div><div class="code"><pre><code>.example-icon-13 { .lib-icon-font(@icon-calendar); .lib-icon-font-size( @_icon-font-size: 26px ); }</code></pre></div></article><article id="change-the-size-of-font-icon-variables" class="section"><div class="docs"><a href="#change-the-size-of-font-icon-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="change-the-size-of-font-icon-variables">Change the size of font icon variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_icon-font-size</th> <td>@icon-font__size</td> <td class="vars_value">inherit</td> <td class="vars_value">'' | false | value</td> <td>Font icon font size</td> </tr> <tr> <th nowrap="nowrap">@_icon-font-line-height</th> <td>@icon-font__line-height</td> <td class="vars_value">@icon-font__size</td> <td class="vars_value">'' | false | value</td> <td>Font icon line height</td> </tr> <tr> <th>@_icon-font-position</th> <td>@icon-font__position</td> <td class="vars_value">before</td> <td class="vars_value">before | after</td> <td>Font icon - icon position</td> </tr> </table> </pre> </div></article><article id="hide-icon-text" class="section"><div class="docs"><a href="#hide-icon-text" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="hide-icon-text">Hide icon text</h1> <p> The <code>.lib-icon-text-hide()</code> mixin can be used separately to hide text of an element that has an icon text. This mixin accepts no variables.</p> <textarea class="preview-code" spellcheck="false"> <a href="#" class="example-icon-14"><span>icon-calendar</span></a></textarea> </div><div class="code"><pre><code>.example-icon-14 { .lib-icon-font( @icon-envelope, @_icon-font-size: 26px ); .lib-icon-text-hide(); }</code></pre></div></article><article id="sprite-and-font-icons-for-blank-theme" class="section"><div class="docs"><a href="#sprite-and-font-icons-for-blank-theme" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="sprite-and-font-icons-for-blank-theme">Sprite and font icons for Blank theme</h1> <p> You can use the icons designed to our Blank theme, which are also available in two variants: sprite and font</p> <h2 id="icons-using-sprite">Icons using sprite</h2> <textarea class="preview-code" spellcheck="false"> <ul class="icons-image-list"> <li> <span class="icon-search"><span>icon-search</span></span> </li> <li> <span class="icon-cart"><span>icon-cart</span></span> </li> <li> <span class="icon-arrow-down"><span>icon-arrow-down</span></span> </li> <li> <span class="icon-arrow-up"><span>icon-arrow-up</span></span> </li> <li> <span class="icon-grid"><span>icon-grid</span></span> </li> <li> <span class="icon-list"><span>icon-list</span></span> </li> <li> <span class="icon-remove"><span>icon-remove</span></span> </li> <li> <span class="icon-star"><span>icon-star</span></span> </li> <li> <span class="icon-pointer-down"><span>icon-pointer-down</span></span> </li> <li> <span class="icon-pointer-up"><span>icon-pointer-up</span></span> </li> <li> <span class="icon-pointer-left"><span>icon-pointer-left</span></span> </li> <li> <span class="icon-pointer-right"><span>icon-pointer-right</span></span> </li> <li> <span class="icon-compare-empty"><span>icon-compare-empty</span></span> </li> <li> <span class="icon-compare-full"><span>icon-compare-full</span></span> </li> <li> <span class="icon-wishlist-empty"><span>icon-wishlist-empty</span></span> </li> <li> <span class="icon-wishlist-full"><span>icon-wishlist-full</span></span> </li> <li> <span class="icon-update"><span>icon-update</span></span> </li> <li> <span class="icon-collapse"><span>icon-collapse</span></span> </li> <li> <span class="icon-expand"><span>icon-expand</span></span> </li> <li> <span class="icon-menu"><span>icon-menu</span></span> </li> <li> <span class="icon-prev"><span>icon-prev</span></span> </li> <li> <span class="icon-next"><span>icon-next</span></span> </li> <li> <span class="icon-settings"><span>icon-settings</span></span> </li> <li> <span class="icon-info"><span>icon-info</span></span> </li> <li> <span class="icon-checkmark"><span>icon-checkmark</span></span> </li> <li> <span class="icon-calendar"><span>icon-calendar</span></span> </li> <li> <span class="icon-comment"><span>icon-comment</span></span> </li> <li> <span class="icon-comment-reflected"><span>icon-comment-reflected</span></span> </li> <li> <span class="icon-envelope"><span>icon-envelope</span></span> </li> <li> <span class="icon-warning"><span>icon-warning</span></span> </li> <li> <span class="icon-trash"><span>icon-trash</span></span> </li> <li> <span class="icon-flag"><span>icon-flag</span></span> </li> <li> <span class="icon-location"><span>icon-location</span></span> </li> <li> <span class="icon-up"><span>icon-up</span></span> </li> <li> <span class="icon-down"><span>icon-down</span></span> </li> </ul></textarea><h2 id="icons-using-font">Icons using font</h2> <textarea class="preview-code" spellcheck="false"> <ul class="icons-font-list"> <li> <span class="icon-wishlist-full" data-icon=""><span>@icon-wishlist-full</span></span> </li> <li> <span class="icon-wishlist-empty" data-icon=""><span>@icon-wishlist-empty</span></span> </li> <li> <span class="icon-warning" data-icon=""><span>@icon-warning</span></span> </li> <li> <span class="icon-update" data-icon=""><span>@icon-update</span></span> </li> <li> <span class="icon-trash" data-icon=""><span>@icon-trash</span></span> </li> <li> <span class="icon-star" data-icon=""><span>@icon-star</span></span> </li> <li> <span class="icon-settings" data-icon=""><span>@icon-settings</span></span> </li> <li> <span class="icon-next" data-icon=""><span>@icon-next</span></span> </li> <li> <span class="icon-menu" data-icon=""><span>@icon-menu</span></span> </li> <li> <span class="icon-location" data-icon=""><span>@icon-location</span></span> </li> <li> <span class="icon-list" data-icon=""><span>@icon-list</span></span> </li> <li> <span class="icon-info" data-icon=""><span>@icon-info</span></span> </li> <li> <span class="icon-grid" data-icon=""><span>@icon-grid</span></span> </li> <li> <span class="icon-checkmark" data-icon=""><span>@icon-checkmark</span></span> </li> <li> <span class="icon-cart" data-icon=""><span>@icon-cart</span></span> </li> <li> <span class="icon-calendar" data-icon=""><span>@icon-calendar</span></span> </li> <li> <span class="icon-arrow-up" data-icon=""><span>@icon-arrow-up</span></span> </li> <li> <span class="icon-arrow-down" data-icon=""><span>@icon-arrow-down</span></span> </li> <li> <span class="icon-search" data-icon=""><span>@icon-search</span></span> </li> <li> <span class="icon-remove" data-icon=""><span>@icon-remove</span></span> </li> <li> <span class="icon-prev" data-icon=""><span>@icon-prev</span></span> </li> <li> <span class="icon-pointer-down" data-icon=""><span>@icon-pointer-down</span></span> </li> <li> <span class="icon-pointer-up" data-icon=""><span>@icon-pointer-up</span></span> </li> <li> <span class="icon-pointer-left" data-icon=""><span>@icon-pointer-left</span></span> </li> <li> <span class="icon-pointer-right" data-icon=""><span>@icon-pointer-right</span></span> </li> <li> <span class="icon-flag" data-icon=""><span>@icon-flag</span></span> </li> <li> <span class="icon-collapse" data-icon=""><span>@icon-collapse</span></span> </li> <li> <span class="icon-expand" data-icon=""><span>@icon-expand</span></span> </li> <li> <span class="icon-envelope" data-icon=""><span>@icon-envelope</span></span> </li> <li> <span class="icon-compare-empty" data-icon=""><span>@icon-compare-empty</span></span> </li> <li> <span class="icon-compare-full" data-icon=""><span>@icon-compare-full</span></span> </li> <li> <span class="icon-comment" data-icon=""><span>@icon-comment</span></span> </li> <li> <span class="icon-comment-reflected" data-icon=""><span>@icon-comment-reflected</span></span> </li> <li> <span class="icon-up" data-icon=""><span>@icon-up</span></span> </li> <li> <span class="icon-down" data-icon=""><span>@icon-down</span></span> </li> <li> <span class="icon-arrow-up-thin" data-icon=""><span>@icon-arrow-up-thin</span></span> </li> <li> <span class="icon-arrow-right-thin" data-icon=""><span>@icon-arrow-right-thin</span></span> </li> <li> <span class="icon-arrow-left-thin" data-icon=""><span>@icon-arrow-left-thin</span></span> </li> <li> <span class="icon-arrow-down-thin" data-icon=""><span>@icon-arrow-down-thin</span></span> </li> <li> <span class="icon-arrow-left-thin" data-icon=""><span>@icon-gift-registry</span></span> </li> <li> <span class="icon-arrow-down-thin" data-icon=""><span>@icon-present</span></span> </li> </ul></textarea> </div><div class="code"><pre><code>.icons-image-list { list-style: none; padding: 0; li { float: left; width: 33%; > span { .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png'); } .icon-search { .lib-icon-sprite-position(0, 0); } .icon-cart { .lib-icon-sprite-position(1, 0); } .icon-arrow-down { .lib-icon-sprite-position(2, 0); } .icon-arrow-up { .lib-icon-sprite-position(3, 0); } .icon-grid { .lib-icon-sprite-position(4, 0); } .icon-list { .lib-icon-sprite-position(5, 0); } .icon-remove { .lib-icon-sprite-position(6, 0); } .icon-star { .lib-icon-sprite-position(7, 0); } .icon-pointer-down { .lib-icon-sprite-position(8, 0); } .icon-pointer-up { .lib-icon-sprite-position(9, 0); } .icon-pointer-left { .lib-icon-sprite-position(10, 0); } .icon-pointer-right { .lib-icon-sprite-position(11, 0); } .icon-compare-empty { .lib-icon-sprite-position(0, 1); } .icon-compare-full { .lib-icon-sprite-position(1, 1); } .icon-wishlist-empty { .lib-icon-sprite-position(2, 1); } .icon-wishlist-full { .lib-icon-sprite-position(3, 1); } .icon-update { .lib-icon-sprite-position(4, 1); } .icon-collapse { .lib-icon-sprite-position(5, 1); } .icon-expand { .lib-icon-sprite-position(6, 1); } .icon-menu { .lib-icon-sprite-position(7, 1); } .icon-prev { .lib-icon-sprite-position(8, 1); } .icon-next { .lib-icon-sprite-position(9, 1); } .icon-settings { .lib-icon-sprite-position(10, 1); } .icon-info { .lib-icon-sprite-position(11, 1); } .icon-checkmark { .lib-icon-sprite-position(0, 2); } .icon-calendar { .lib-icon-sprite-position(1, 2); } .icon-comment { .lib-icon-sprite-position(2, 2); } .icon-comment-reflected { .lib-icon-sprite-position(3, 2); } .icon-envelope { .lib-icon-sprite-position(4, 2); } .icon-warning { .lib-icon-sprite-position(5, 2); } .icon-trash { .lib-icon-sprite-position(6, 2); } .icon-flag { .lib-icon-sprite-position(7, 2); } .icon-location { .lib-icon-sprite-position(8, 2); } .icon-up { .lib-icon-sprite-position(9, 2); } .icon-down { .lib-icon-sprite-position(10, 2); } } } @icon-wishlist-full: '\e600'; @icon-wishlist-empty: '\e601'; @icon-warning: '\e602'; @icon-update: '\e603'; @icon-trash: '\e604'; @icon-star: '\e605'; @icon-settings: '\e606'; @icon-pointer-down: '\e607'; @icon-next: '\e608'; @icon-menu: '\e609'; @icon-location: '\e60a'; @icon-list: '\e60b'; @icon-info: '\e60c'; @icon-grid: '\e60d'; @icon-comment-reflected: '\e60e'; @icon-collapse: '\e60f'; @icon-checkmark: '\e610'; @icon-cart: '\e611'; @icon-calendar: '\e612'; @icon-arrow-up: '\e613'; @icon-arrow-down: '\e614'; @icon-search: '\e615'; @icon-remove: '\e616'; @icon-prev: '\e617'; @icon-pointer-up: '\e618'; @icon-pointer-right: '\e619'; @icon-pointer-left: '\e61a'; @icon-flag: '\e61b'; @icon-expand: '\e61c'; @icon-envelope: '\e61d'; @icon-compare-full: '\e61e'; @icon-compare-empty: '\e61f'; @icon-comment: '\e620'; @icon-up: '\e621'; @icon-down: '\e622'; @icon-arrow-up-thin: '\e623'; @icon-arrow-right-thin: '\e624'; @icon-arrow-left-thin: '\e625'; @icon-arrow-down-thin: '\e626'; .icons-font-list { list-style: none; padding: 0; li { float: left; width: 25%; margin-bottom: 35px; text-align: center; > span { .lib-icon-font('', @_icon-font-size: 34px); &:before { content: attr(data-icon); margin: 0 auto; display: block; } } } }</code></pre></div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg vie … [Строка слишком длинная. Вы можете скачать файл]