显示作为正方形的象

时间:2016-07-12 13:50:52

标签: javascript html css font-awesome

我使用过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">

但是图标显示为正方形。

enter image description here

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>

上面的脚本正在处理字体但不处理图标。

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

简单线图标不适用于上面的html代码。

2 个答案:

答案 0 :(得分:1)

我已经对答案做出了评论......

你在图标类之前忘记了字体很棒的“fa”类。例如:

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

Cheatsheet for font awesome here:http://fontawesome.io/cheatsheet/查看所有图标的所有其他类。

答案 1 :(得分:0)

两者都运转良好。你能告诉我们完整的实时代码吗?

&#13;
&#13;
<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>
&#13;
&#13;
&#13;