angular6添加子路由_如何将Ionicons添加到Angular 6应用

angular6添加子路由

by Adedoja Adedamola

通过Adedoja Adedamola

如何将Ionicons添加到Angular 6应用 (How to add Ionicons to your Angular 6 apps)

I have had to work on a lot of Angular apps recently and Font Awesome has literally tired me out. So I decided to use Ionicons off the popular Ionic framework.

我最近不得不处理许多Angular应用程序，而Font Awesome确实使我感到疲倦。 因此，我决定在流行的Ionic框架之外使用Ionicons 。

This post shows how to set up Ionicons on your Angular project. We will take the following steps:

这篇文章显示了如何在Angular项目上设置Ionicons 。 我们将采取以下步骤：

• Install Angular CLI v6
  安装Angular CLI v6
• Create a new Angular v6 app
  创建一个新的Angular v6应用
• Install Ionicons
  安装离子
• Setup Ionicons for use on your Angular v6 app
  设置Ionicons以在Angular v6应用程序上使用

安装Angular CLI v6 (Install Angular CLI v6)

This is pretty simple — you just install the latest Angular version via npm.

这非常简单-您只需通过npm安装最新的Angular版本。

npm install -g @angular/cli@latest

After that has been done, you then run a ng --version to check for the version of Angular you have installed. Make sure it is Angular CLI version of 6.0.0 and above, like below.

完成之后，您可以运行ng --version来检查已安装的Angular版本。 确保它是6.0.0及更高版本的Angular CLI版本，如下所示。

创建一个新的Angular v6应用 (Create a new Angular v6 app)

At this point, you have installed the Angular CLI globally on your PC. Now you get to create a new Angular app. We use the ng new name-of-my-incredible-app command, it allows us to create an Angular application.

至此，您已经在PC上全局安装了Angular CLI。 现在您可以创建一个新的Angular应用程序。 我们使用ng new name-of-my-incredible-app命令，它允许我们创建An​​gular应用程序。

ng new my-ionicons-angular-app --style=scss

The SCSS bit is there to allow us to use SCSS. This takes a bit. When it is done, we then navigate to the newly created app.

SCSS位用于允许我们使用SCSS。 这需要一点时间。 完成后，我们将导航到新创建的应用程序。

cd my-ionicons-angular-app

As soon as we are in the project directory, we can then start the development server.

一旦进入项目目录，就可以启动开发服务器。

ng serve

This returns the following:

这将返回以下内容：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Running the URL http://localhost:4200/ shows you your brand new app. If you see the screen below. You are good to go.

运行URL http：// localhost：4200 /会显示出您全新的应用程序。 如果您看到下面的屏幕。 你已准备好出发。

安装离子 (Install Ionicons)

Like we did earlier, we use npm again to install Ionicons.

像我们之前所做的一样，我们再次使用npm来安装Ionicons。

npm install ionicons

设置Ionicons以在Angular v6应用程序上使用 (Setup Ionicons for use on your Angular v6 app)

As soon as it installs, we need to tell angular where and how to load it. Best way to do it is inside our styles.scss file and you do this by adding the following lines:

安装后，我们需要告诉angular在哪里以及如何加载它。 最好的方法是在我们的styles.scss文件中，并通过添加以下几行来做到这一点：

$ionicons-font-path: "~ionicons/dist/fonts";@import "~ionicons/dist/scss/ionicons.scss";

It should be set up correctly at this point. You can edit your homepage file — app.component.html and using the font icon to add a new icon there like this: <i class="icon ion-md-heart"&gt;</i> . You can also have a look at the Ionicons page for a list of icons there. Below is what my homepage looks like along with my app.component.html file.

此时应正确设置。 您可以编辑主页文件— app.component.html，然后使用字体图标在其中添加新图标，如下所示： <i class="icon ion-md-heart"&g t; </ i>。 您也可以在 Ionicons页面上查看那里的图标列表。 以下是我的首页以及app.component.html文件的外观。

就是这样！！ (That’s that!!)

Pretty easy. I hope you made it to the end. If you have any questions or you see something wrong or something that can be done better, please leave a comment below or you can message me on twitter @TrussDamola.

挺容易。 我希望你做到了。 如果您有任何疑问，或者发现有问题或可以做得更好的事情，请在下面发表评论，或者在Twitter @TrussDamola上给我发消息 。

Cheers!

干杯!

翻译自: https://www.freecodecamp.org/news/how-to-add-ionicons-to-your-angular-6-apps-7ee5a7b85dc2/

angular6添加子路由