Glyphicon不显示根据：https://getbootstrap.com/docs/3.3/components/可能是我忽略了一些显而易见的事情。
以下是代码：
@Component({
selector: 'testDirective, [testDirective]',
template: require('./views/test1.html') or require ('./views/test2.html')
})
export class Angular2Component {
...
}
是的，你是对的。我在'css / bootstrap.css'和'js / bootstrap.js'上使用Bootstrap v4.0.0-beta
HTML：
<section id="feature">
<div class="container">
<div class="row justify-content-around">
<div class="col-5">
<h3>Gamma Features</h3>
<ul>
<li><span class="glyphicon glyphicon-ok"></span> Feature 1</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 2</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 3</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 4</li>
</ul>
</div>
<div class="col-4">
<img class="big-logo" src="./img/logo.png" alt="logo">
</div>
</div>
</div>
</section>
CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Gamma: Photo-Sharing App</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand green-text" href="#">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h1>Capture <span class="green-text">Life</span></h1>
<p>A fun and easy way to capture & share the moments you live for</p>
<a href="#"><img src="./img/icon_app_store.png" alt="apple store" class="app-btn"></a>
<a href="#"><img src="./img/icon_google_play.png" alt="google play" class="app-btn"></a>
</div>
<div class="col-md-6">
<img class="showCase-img" src="./img/site_phone.png" alt="phone">
</div>
</div>
</div>
</div>
<section id="middle">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="./img/demo1.jpg" alt="two phones" class="demo-1">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-dark" role="button">Read More</a>
</div>
<div class="col-md-4">
<img src="./img/demo2.jpg" alt="three phones" class="demo-2">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-dark" role="button">Read More</a>
</div>
<div class="col-md-4">
<img src="./img/demo3.jpg" alt="artwork" class="demo-3">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-dark" role="button">Read More</a>
</div>
</div>
</div>
</section>
<section id="feature">
<div class="container">
<div class="row justify-content-around">
<div class="col-5">
<h3>Gamma Features</h3>
<ul>
<li><span class="glyphicon glyphicon-ok"></span> Feature 1</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 2</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 3</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 4</li>
</ul>
</div>
<div class="col-4">
<img class="big-logo" src="./img/logo.png" alt="logo">
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>
我还在'https://getbootstrap.com/docs/4.0/migration/#components'找到了其他信息。看起来这个信号表明“Glyphicons”被丢弃了！不确定。我现在正在研究它。
答案 0 :(得分：0)
好的，是的，＆＃34; Glyphicons＆＃34;根据：LockFile被删除。我用＆＃34; Font Awesome＆＃34;替换了它们。 at：https://getbootstrap.com/docs/4.0/migration/#components - 他们建议的替代方案之一。问题解决了。