Search code examples
plunker

Learning AngularJS in Plunker: font-awesome up/down arrow not showing


This is my plunker url and code snippet:

http://plnkr.co/edit/lUB8pYKRn5JudhToxykj

<head>
  <title>Event Registration</title>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
  <script data-require="[email protected]" data-semver="3.2.0" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link data-require="[email protected]" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="app.css" />
  <script src="app.js"></script>
  <script src="EventController.js"></script>
</head>

  <div class="span0 well votingWidget">
    <div class="votingButton">
      <i class="icon-chevron-up icon-white"></i>
    </div>
    <div class="badge badge-inverse">
      <div>{{session.upVoteCount}}</div>
    </div>
    <div class="votingButton">
      <i class="icon-chevron-down"></i>
    </div>
  </div>

The icon-chevron-up, icon-chevron-down button wouldn't show up and bootstrap seems not working either.

So how to set it up right?

Thanks much! Zhen


Solution

  • <!DOCTYPE html>
    <html lang="en" ng-app="eventsApp">
    
    <head>
      <title>Event Registration</title>
      <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
      <script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
      <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
      <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
    
      <link rel="stylesheet" href="app.css" />
      <script src="app.js"></script>
      <script src="EventController.js"></script>
    </head>
      <div class="span0 well votingWidget">
        <div class="votingButton">
          <i class="icon-chevron-up icon-white"></i>
        </div>
        <div class="badge badge-inverse">
          <div>{{session.upVoteCount}}</div>
        </div>
        <div class="votingButton">
          <i class="icon-chevron-down"></i>
        </div>
      </div>