显示为正方形的图标

Question

我用过 Metronic 管理主题面板。我为此调用了三个脚本。 HTML 图标代码是 <i class="icon-home"></i>

脚本

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.3.2/css/simple-line-icons.css" rel="stylesheet" type="text/css">

但是图标显示为正方形。

HTML代码

<li <?php echo ($module == 'dashboard') ? 'class="nav-item active"' : ''; ?>>
    <a href="include.php?page=d-dashboard" class="nav-link nav-toggle">
      <i class="icon-home"></i>
      <span class="title">Dashboard</span>
      <span class="selected"></span>
      <span class="arrow"></span>
    </a>
</li>

以上脚本适用于字体但不适用于图标。

简单的线条图标URL: http://keenthemes.com/preview/metronic/theme/admin_1/ui_icons.html

简单线条图标不适用于上述 html 代码。

Answer 1

两者都工作正常。你能给我们完整的实时代码吗？

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.3.2/css/simple-line-icons.css" rel="stylesheet" type="text/css">

<p>Font awesome <i class="fa fa-trash"></i></p>
<p>Simple Line Icons <i class="icon-call-out icons"></i></p>

Answer 2

我已经将我的评论变成了答案...

您忘记了图标 class 前的超赞字体 "fa" class。示例：

<i class="fa fa-home"></i>

这里是很棒的字体备忘单：http://fontawesome.io/cheatsheet/ 查看所有图标的所有其他 classes。

显示为正方形的图标

Icons showing as squares

html

javascript

css

font-awesome