書名： Full-Stack Vue.js 2 and Laravel 5
作者名： Anthony Gore
本章字數： 142字
更新時間： 2021-07-02 19:57:20

Icons

The second property of our amenity objects isicon. This is actually a class relating to an icon in the Font Awesome icon font. We've installed Font Awesome as an NPM module already, so add this to the head of the page to now use it.

index.html:

<head>
  ...
  <link rel="stylesheet" href="node_modules/open-sans-all/css/open-sans.css">
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

Now we can complete the structure of ouramenitiessection in the template.

index.html:

<p class="lists">
  <hr>
  <p class="amenities list">
    <p class="title"><strong>Amenities</strong></p>
    <p class="content">
      <p class="list-item" v-for="amenity in amenities">
        <i class="fa fa-lg" v-bind:class="amenity.icon"></i>
        <span>{{ amenity.title }}</span>
      </p>
    </p>
  </p>
</p>

style.css:

.list {
  display: flex;
  flex-wrap: nowrap;
  margin: 2em 0;
}

.list .title {
  flex: 1 1 25%;
}

.list .content {
  flex: 1 1 75%;
  display: flex;
  flex-wrap: wrap;
}

.list .list-item {
  flex: 0 0 50%;
  margin-bottom: 16px;
}

.list .list-item > i {
  width: 35px;
}

@media (max-width: 743px) {
  .list .title {
    flex: 1 1 33%;
  }

  .list .content {
    flex: 1 1 67%;
  }

  .list .list-item {
    flex: 0 0 100%;
  }
}

官术网_书友最值得收藏!

Full-Stack Vue.js 2 and Laravel 5

Icons