Блок "Icon"

Описание

Блок "Icon" - это иконка. Для использования блока вам нужно в своем LESS файле подключить icon.less.

						
@import "../../blocks/icon/icon.less" 
						
					

Важно! Путь указан относительно текущего файла. Вполне возможно, что вам потребуется указать свой. Для примера я указал в теге style путь к демо-иконке.

Далее требуется скопировать следующую разметку и вставить в свой файл.

											
    
<i class="icon"></i> 
  
						
					

После сделанных шагов вы должны увидеть в браузере следующий результат.

Модификации блока

Icon_small

Подключите требуемые LESS файлы в своем файле.

							
@import "../../blocks/icon/icon.less";
@import "../../blocks/icon/modifiers/icon_small/icon_small.less";
							
						

Далее скопируйте следующий HTML и вставьте в свой файл.

											
    
<i class="icon icon_small"></i> 
  
							
						

Вы должны увидеть следующий результат.

Icon_middle

Подключите требуемые LESS файлы в своем файле.

							
@import "../../blocks/icon/icon.less";
@import "../../blocks/icon/modifiers/icon_middle/icon_middle.less";
							
						

Далее скопируйте следующий HTML и вставьте в свой файл.

											
    
<i class="icon icon_middle"></i> 
  
							
						

Вы должны увидеть следующий результат.

Icon_large

Подключите требуемые LESS файлы в своем файле.

							
@import "../../blocks/icon/icon.less";
@import "../../blocks/icon/modifiers/icon_large/icon_large.less";
							
						

Далее скопируйте следующий HTML и вставьте в свой файл.

											
    
<i class="icon icon_large"></i> 
  
							
						

Вы должны увидеть следующий результат.