Не отображаются иконки Glyphicons на WordPress + Bootstrap

Сверстал я себе второй блог StepkinBlog.ru на Фреймворк Bootstrap. Для тех, кто не в курсе, что такое Bootstrap, рекомендую ознакомиться. После верстки я натянул шаблон на WordPress, указал правильный путь к CSS стилям и к скриптам. Казалось бы, все сделал верно. Но когда я стал выводить иконки Glyphicons, то вместо красивых иконок, я увидел квадраты.

Начав разбираться в проблеме, я обнаружил, что совсем забыл исправить путь к папке «FONT», которая и отвечала за правильное отображение иконок.
Итак, откройте файл «bootstrap.css» в папке «CSS» и найдите вот такой код:

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Вам нужно здесь указать правильный путь. Вот так:

src: url('https://адрес сайта/wp-content/themes/название шаблона/fonts/glyphicons-halflings-regular.eot');

Вот так выглядит мой случай:

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('https://stepkinblog.ru/wp-content/themes/stepkinblog/fonts/glyphicons-halflings-regular.eot');
  src: url('https://stepkinblog.ru/wp-content/themes/stepkinblog/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://stepkinblog.ru/wp-content/themes/stepkinblog/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://stepkinblog.ru/wp-content/themes/stepkinblog/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://stepkinblog.ru/wp-content/themes/stepkinblog/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

После проделанных изменений в файле «bootstrap.css» в папке «CSS» все иконки Glyphicons отобразились:

Вот и все! Кстати, приглашаю всех на мой новый блог StepknBlog.ru, если вам интересно следить за историей его развития.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: Bootstrap, wordpress, Вебмастеру