Шрифт-Потрясающие-Иконки с листовкой-Потрясающие-Маркеры не отображаются

#jquery #css #leaflet #font-awesome

#jquery #css #листовка #шрифт-потрясающий

Вопрос:

Я уверен, что это что-то простое, но я просто не вижу, что я делаю неправильно. Я использую плагин Leaflet Awesome Markers. Маркеры работают отлично, проблема в том, что значки Fontawesome- не видны. Я сделал все шаг за шагом, как сказано в описании, следующие две строки находятся в моем теге head.

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/leaflet.awesome-markers.css">

эти две строки находятся в конце моего html:

     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="js/leaflet.awesome-markers.js"></script>

И, как сказано в https://github.com/lvoogdt/Leaflet.awesome-markers вот мой скрипт:

 var restaurantMarker = L.AwesomeMarkers.icon({
icon: 'coffee', 
markerColor: 'darkred',
prefix: 'fa', 
iconColor: 'black'
});

L.marker([48.185556, 11.620278], {icon: restaurantMarker}).addTo(map)
    .bindPopup('Aumeister');

Как это работает здесь http://jsfiddle.net/VPzu4/92 / и, по крайней мере, я пытался сделать все так, как было описано, я просто не вижу ошибки….

fontawesome-маркеры-листовка Кроме того, как вы можете видеть на картинке, значок должен быть в маркере …

1. Перейдите на вкладку сеть в инструментах разработчика и перезагрузите страницу, загружается ли изображение? Какой код ошибки возвращает изображение? Это ошибки в консоли? Должен ли первый <link href="//maxcdn.bootstrapc... быть <link href="http://maxcdn.bootstrapc... ?

2. Я изменил ссылку — все та же проблема. в консоли нет ошибок…. действительно странно..

3. Что говорит вкладка сеть, когда вы открываете ее, а затем обновляете страницу? Это должно выдать вам список всех загруженных файлов. Видите ли вы файл ‘font-awesome.min.css’ в этом списке? Был ли он успешно восстановлен? Вы запускаете эту страницу локально или с сервера?

4. В нем говорится, что статус 304 — Не изменен

5. Я запускаю его с локального хостинга

Ответ №1:

Я действительно не могу вам полностью помочь, так как у меня нет всего кода, НО:

Мне кажется, что вы не используете правильное семейство для вашего шрифта-Awesome. Если вы посмотрите на семейство шрифтов вашего значка, там написано «locate-fa», и он получает CSS из locate-fa.css.22.

Я протестировал ваш код, и он сработал благодаря правильному CSS, моей скрипке.

 .fa{
    font-family: FontAwesome;

Однако, если вы посмотрите на CSS при проверке маркера, там правильно указано, что CSS взят из font-awesome.css и что семейство шрифтов является правильным FontAwesome.

Попробуйте найти «locate»-часть, которая мешает вашему CSS, и это должно сработать!

1. Спасибо 😉 И да, вы полностью правы, я уже заметил, что проблема заключалась в locate-fa!

2. @user3671746 Потрясающе! Отметьте ответ как решенный, чтобы другие знали, что подобные проблемы можно решить таким образом!