html 页中的图标

Question

我是 html 的新手，打算设计一个个人网页。以下是我写的代码。一切都很好，我唯一的问题是我使用的两个图标：icon-user 和 icon-book。问题是它没有显示在页面中。

<!DOCTYPE html>
<html class=" js no-touch csstransitions" style="" lang="en"><head>
    <title>Vahid: Homepage</title>
    <!--CSS styles-->
    <link rel="stylesheet" href="Vahid%20::%20Homepage_files/bootstrap.css">
    <link rel="stylesheet" href="Vahid%20::%20Homepage_files/font-awesome.css">  
    <link rel="stylesheet" href="Vahid%20::%20Homepage_files/perfect-scrollbar-0.css">
    <link rel="stylesheet" href="Vahid%20::%20Homepage_files/magnific-popup.css">
    <link rel="stylesheet" href="Vahid%20::%20Homepage_files/style.css">
    <link id="theme-style" rel="stylesheet" href="Vahid%20::%20Homepage_files/default.css">
    <!-- bxSlider CSS file -->
    <link href="Vahid%20::%20Homepage_files/jquery.css" rel="stylesheet">
</head>
<body data-twttr-rendered="true">
    <div id="wrapper">
        <a href="#sidebar" class="mobilemenu"><i class="icon-reorder"></i></a>
        <div id="sidebar">
            <div class="ps-container" id="main-nav">
                <div id="nav-container">
                    <div id="profile" class="clearfix">
                        <div class="portrate hidden-xs"></div>
                        <div class="title">
                            <h2>Vahid</h2>
                        </div>
                    </div>
                    <ul id="navigation">
                        <li class="currentmenu">
                            <a href="Vahid :: Homepage.html">
                                <div class="icon icon-user"></div>
                                <div class="text">About Me</div>
                            </a>
                        </li>  
                        <li>
                            <a href="Vahid :: Research.html">
                                <div class="icon icon-book"></div>
                                <div class="text">Research</div>
                            </a>
                        </li> 
                    </ul>
                </div>        
            </div>
        </div>
    <iframe style="display: none;" allowtransparency="true" scrolling="no" id="rufous-sandbox" frameborder="0"></iframe></body></html>

而且两个图标都有明确定义的字体-awesome.css

.icon-user:before{content:"\f007";}
.icon-book:before{content:"\f02d";}

如果你们能帮上忙就太好了。

Answer 1

<i class="fa fa-book"></i> 简化卡米尔的回应。

您可以将 i 放入另一个 div，这样问题会更少。

EX：<div class="text"><i class="fa fa-book"></i> About Me</div>。

复制并粘贴。我建议您始终使用 i 标签来放置图标。您可以将它们放在大多数 html 标签中，例如 headers.

<h1><i class="fa fa-magnet"></i> This is a magnent</h1>

查看 http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ 的替代方法。

如果您是 bootstrap 的新手，请查看 http://bootsnipp.com/
这是代码片段的重要参考。

如果您使用的是 Bootstrap 3，请查看此 link http://getbootstrap.com/components/ 您将在此处阅读有关字形图标的信息。

Glyphicons 现在带有 Bootstrap，您有时会发现 glyphicons 更合适。

html 页中的图标

icons in html page

html

css

icons