Make marker printable about leaflet.awesome-markers HOT 5 OPEN

I have also struggled with this, and found a partial solution.
The origin of the problem is that background is set to transparent and the color (of the icons) is set to black by some @media print rules in Bootstrap.
I was able to override these rules for Leaflet.awesome markers within the leaflet.awesome-markers css file. I added !important to the css rules for background (both for marker and marker shadow):
for example-
.awesome-marker {
background: url('images/markers-soft.png') no-repeat 0 0!important;...

I also added it to the background-position rules for each color of icon.
for example-
.awesome-marker-icon-orange {
background-position: -25px 0!important;....

I have not found a way to override the icon color changing to black (except to comment-out, or remove, that @media print rule in the bootstrap css, which may affect more than just the map markers in your webpage).
I hope this helps anyone trying to troubleshoot the problem.

from leaflet.awesome-markers.

Any news on this? I am struggling with it too! @cmrRose which rule exactly you took off? I got to something like this but it doesnt get neither the shape or the color..

from leaflet.awesome-markers.

I simply downloaded Bootstrap without @media print queries (http://getbootstrap.com/customize/ ; uncheck "Print media styles").

If you are using Chrome, you must allow printing of background images and colors in Chrome print dialog.

from leaflet.awesome-markers.

Hi, were you able to print the map with the icons ? I'd like to use leaflet-image but I don't know if both libs are compatible :

This library does not rasterize HTML because browsers cannot rasterize HTML. Therefore, L.divIcon and other HTML-based features of a map, like zoom controls or legends, are not included in the output, because they are HTML. (leaflet-image)

from leaflet.awesome-markers.

Thanks @cmrRose !
Your solution works.

from leaflet.awesome-markers.