来自第三方库的复选框标志不可见

Question

我正在尝试使用名为pretty checkbox的css库。我都尝试了直接link和npm install，如下所示：

bower install pretty-checkbox 

当我在html上使用它时，我会在UI中看到它：

这是我使用的HTML：

<div class="pretty o-primary">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Primary</label>
</div>
<div class="pretty o-success">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Success</label>
</div>
<div class="pretty o-warning">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Warning</label>
</div>
<div class="pretty o-info">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Info</label>
</div>
<div class="pretty o-danger">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Danger</label>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.1/pretty.min.css" />
<!-- works after adding this -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/1.9.33/css/materialdesignicons.css" />

<div class="pretty o-primary">
  <input type="checkbox" />
  <label><i class="mdi mdi-check"></i> Primary</label>
</div>
<div class="pretty o-success">
  <input type="checkbox" />
  <label><i class="mdi mdi-check"></i> Success</label>
</div>
<div class="pretty o-warning">
  <input type="checkbox" />
  <label><i class="mdi mdi-check"></i> Warning</label>
</div>
<div class="pretty o-info">
  <input type="checkbox" />
  <label><i class="mdi mdi-check"></i> Info</label>
</div>
<div class="pretty o-danger">
  <input type="checkbox" />
  <label><i class="mdi mdi-check"></i> Danger</label>
</div>