title: Custom legend with R leaflet
body: <p>I am using R leaflet to produce a leaflet map. I was able to change the border of my legend</p>
  
  <p><a href="https://i.stack.imgur.com/LjU6B.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LjU6B.png" alt="enter image description here"></a></p>
  
  <p>by adding to my css file (after saving the leaflet map on my computer)</p>
  
  <pre><code>.legend {
      padding: 6px 10px 6px 6px;
      color: #000033;
      background: #fff;
      border-left:5px solid #666666;
      border-right:5px solid #666666;
      border-top:5px solid #666666;
      border-bottom:5px solid #666666
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Y29tj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Y29tj.png" alt="enter image description here"></a></p>
  
  <p>However when I try to replace the squares with circles (to match the circles on the map) in my legend it does not work. I used (from:<a href="https://gis.stackexchange.com/questions/88462/how-to-create-leaflet-legend-for-points">https://gis.stackexchange.com/questions/88462/how-to-create-leaflet-legend-for-points</a>):</p>
  
  <pre><code>.legend .circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-top: 8px;
  } 
  </code></pre>
  
  <p>I am new to css so any suggestions would be appreciated.</p>
  
  <p>Here is my html doc.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;script src="test_files/htmlwidgets-0.5/htmlwidgets.js"&gt;&lt;/script&gt;
  &lt;script src="test_files/jquery-1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="test_files/leaflet-0.7.3/leaflet.css" rel="stylesheet" /&gt;
  &lt;script src="test_files/leaflet-0.7.3/leaflet.js"&gt;&lt;/script&gt;
  &lt;link href="test_files/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" /&gt;
  &lt;link href="test_files/leaflet-label-0.2.2/leaflet.label.css" rel="stylesheet" /&gt;
  &lt;script src="test_files/leaflet-label-0.2.2/leaflet.label.js"&gt;&lt;/script&gt;
  &lt;script src="test_files/leaflet-binding-1.0.1.9002/leaflet.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body style="background-color:white;"&gt;
  &lt;div id="htmlwidget_container"&gt;
    &lt;div id="htmlwidget-9645" style="width:100%;height:400px;" class="leaflet"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="application/json" data-for="htmlwidget-9645"&gt;{"x":{"calls":[{"method":"addTiles","args":["http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"maxNativeZoom":null,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"continuousWorld":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":null,"unloadInvisibleTiles":null,"updateWhenIdle":null,"detectRetina":false,"reuseTiles":false,"attribution":"&amp;copy; &lt;a href=\"http://openstreetmap.org\"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href=\"http://creativecommons.org/licenses/by-sa/2.0/\"&gt;CC-BY-SA&lt;/a&gt;"}]},{"method":"addCircles","args":[[42.3601,41.7627,40.7127,39.95,40.4397,41.8236],[-71.0589,-72.6743,-74.0059,-75.1667,-79.9764,-71.4222],[24111.6030159755,10607.3229421942,86979.3078841169,37385.8261912185,16590.8679700611,12656.8005435813],null,null,{"lineCap":null,"lineJoin":null,"clickable":true,"pointerEvents":null,"className":"","stroke":true,"color":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"weight":1,"opacity":0.5,"fill":true,"fillColor":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"fillOpacity":0.2,"dashArray":null},["Boston","Hartford","New York City","Philadelphia","Pittsburgh","Providence"],null,null]},{"method":"addLegend","args":[{"colors":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"labels":["Boston","Hartford","New York City","Philadelphia","Pittsburgh","Providence"],"na_color":null,"na_label":"NA","opacity":0.5,"position":"bottomright","type":"factor","title":"Cities","extra":null,"layerId":null,"className":"info legend"}]}],"limits":{"lat":[39.95,42.3601],"lng":[-79.9764,-71.0589]}},"evals":[]}&lt;/script&gt;
  &lt;script type="application/htmlwidget-sizing" data-for="htmlwidget-9645"&gt;{"viewer":{"width":"100%","height":400,"padding":0,"fill":true},"browser":{"width":"100%","height":400,"padding":0,"fill":true}}&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>