Question

我是html的新手，并计划设计一个个人网页。以下是我写的代码。一切都很好，我唯一的问题是我使用的两个图标：图标用户和图标书。问题是它没有出现在页面中。

<!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>

并且两个图标都清楚地定义了font-awesome.css

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

如果你们能提供帮助，那就太棒了。

Answer 1

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

你可以把我放到另一个div中，你会遇到更少的问题。

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

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

<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，请查看此链接http://getbootstrap.com/components/ 你会在这里阅读有关glyphicons的内容。

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

html页面中的图标

1 个答案: