Мои глификоны не работают в Chrome — почему?

Я создаю сайт для клиента, на основе шаблона. Шаблон использует структуру Bootstrap, которая использует Glyphicons для некоторых изображений. Если я перехожу на домашнюю страницу BootStrap в Chrome, Glyphicons работает нормально.

Вот страница, которая у меня не работает: http://www.laidoffsoftware.com/Contact.aspx< /а>

Если вы посмотрите на значки в разделе АДРЕС, вы должны увидеть значок телефона рядом с номером телефона и значок конверта рядом с адресом электронной почты. В FF, IE или Opera это выглядит нормально. Однако в Chrome значки сломаны, это какие-то странные символы.

Я в недоумении, почему это происходит?

Любые идеи приветствуются.

ОБНОВЛЕНИЕ: Консоль Chrome показывает это сейчас:

Значение аргумента области просмотра «100%» для ключа «ширина» было усечено до числового префикса.

Contact.aspx:8 Ресурс интерпретируется как шрифт, но передается с типом MIME font/x-woff: "http://www.laidoffsoftware.com/font/fontawesome-webfont.woff".

Contact.aspx:290 Ресурс интерпретируется как шрифт, но передается с типом MIME image/svg+xml: "http://www.laidoffsoftware.com/font/IcoMoon.svg".

@font-face {
    font-family: 'IcoMoon';
    src: url('../font/IcoMoon.eot');
    src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
    url('../font/IcoMoon.svg#IcoMoon') format('svg'),
    url('../font/IcoMoon.woff') format('woff'),
    url('../font/IcoMoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
    content: attr(data-icon);
    speak: none; }

/* Use the following CSS code if you want to have a class per icon */ [class^="icon-"]:before, [class*=" icon-"]:before {font-family: 'FontAwesome', 'IcoMoon';
    font-style: normal;
    speak: none; } .icon-home:before {content: "\0021";} .icon-home-2:before {content: "\0022";} .icon-home-3:before {content: "\0023";} .icon-newspaper:before {content: "\0024";}

google-chrome css twitter-bootstrap glyphicons
person Todd Davis    schedule 06.02.2013    source источник
comment
Это должен быть телефон. Посмотрите на это изображение, оно правильно i.imgur.com/M3hlvYs.jpg   -  person Todd Davis    schedule 06.02.2013

Ответы (4)


arrow_upward
1
arrow_downward

Похоже, это ошибка в WebKit, о которой сообщалось здесь: https://bugs.webkit.org/show_bug.cgi?id=76152

Кроме того, создатель GlyphIcons говорит, что знает об этой проблеме и попытается использовать другие значения Unicode в следующем выпуске, чтобы обойти эту ошибку: https://twitter.com/glyphicons/status/423426740128854016

person CBarr    schedule 21.01.2014

arrow_upward
1
arrow_downward

Я думаю, что понял ответ, хотя я не уверен на 100%, почему это работает. См. приведенный выше код CSS, я внес это изменение...

url('../font/IcoMoon.svg#IcoMoon') format('opentype'),
person Todd Davis    schedule 06.02.2013

arrow_upward
1
arrow_downward

Вы должны установить URL-адреса шрифта относительно пути расширения. Так что вам нужно изменить это

@font-face {
font-family: 'IcoMoon';
src: url('../font/IcoMoon.eot');
src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('../font/IcoMoon.svg#IcoMoon') format('svg'),
url('../font/IcoMoon.woff') format('woff'),
url('../font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
content: attr(data-icon);
speak: none; }

to

@font-face {
font-family: 'IcoMoon';
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot');
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.svg#IcoMoon') format('svg'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.woff') format('woff'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
content: attr(data-icon);
speak: none; }chrome-extension://__MSG_@@extension_id__/

и включите вас css в файл манифеста следующим образом: "css": ["/css/mystyle.css"]

person Peter T.    schedule 19.11.2015
comment
спас мой день! Еще один шаг: web_accessible_resources: [fonts/*] добавить выше в манифест json! - person Rishul Matta; 18.05.2017

arrow_upward
0
arrow_downward

Посмотрите в консоли. У вас какая-то ошибка на всех страницах: Viewport argument value "no;" for key "user-scalable" not recognized. Content ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

Сначала исправьте это, а затем посмотрите, решит ли это проблему, а если нет — копайте ковш.

ОБНОВЛЕНИЕ

Еще одна вещь, которую я только что проверил: Twitter Bootstrap не предоставляет глиф по умолчанию с классом icon-phone: http://twitter.github.com/bootstrap/base-css.html#icons

Вы можете использовать пользовательский значок, созданный вами или взятый из другого источника, но вам нужно написать для него css.

person Dmitry Efimenko    schedule 06.02.2013
comment
Спасибо. Это был хороший улов, и по какой-то причине я не видел в этом ошибку в своих браузерах. К сожалению, это не решило проблему. - person Todd Davis; 06.02.2013
comment
Здесь используется библиотека icomoon. - person Todd Davis; 07.02.2013