文档首页 > > 移植指南> 安装Font Awesome

安装Font Awesome

分享
更新时间:2020/11/02 GMT+08:00

介绍

简要介绍

互联网上受欢迎的图标工具箱。除此之外,还提供了图标字体连写、SVG框架、React等流行前端库的官方NPM包以及访问新CDN的功能。

语言:CSS

一句话描述:标志性的SVG、字体和CSS工具包

建议的版本

建议使用版本为“FontAwesome-4.7.0”

环境要求

云服务器要求

本文以云服务器KC1实例测试,云服务器配置如表1所示。

表1 云服务器配置

项目

说明

规格

kc1.xlarge.2 | 4vCPUs | 8GB

磁盘

系统盘:高IO(40GB)

操作系统要求

操作系统要求如表2所示。

表2 操作系统要求

项目

版本

下载地址

EulerOS

2.8

在公共镜像中已提供。

Kernel

4.19.36

在公共镜像中已提供。

配置安装环境

确保环境中正常运行Nginx。

curl http://127.0.0.1/index.html

如果回显如下,则表明Nginx正常工作。

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<br>
<p><em>Thank you for using nginx.</em></p>
</body>
</html>

获取软件包

执行以下命令,获取“Font Awesome”图标库。

wget http://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip

安装

  1. 解压图标库包。

    unzip font-awesome-4.7.0.zip

  2. 把解压好目录放置在Nginx的“html”目录下。

    请结合Nginx的实际安装目录放置Font Awesome图标库。

    mv font-awesome-4.7.0 /usr/local/nginx/html

运行和验证

  1. 修改Nginx的“index.html”文件,修改内容如下面加粗部分所示。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Welcome to nginx!</title>
    <style>
        body {
    width: 35em;
    margin: 0 auto;
    font-family: Tahoma, Verdana, Arial, sans-serif;
        }
    </style>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    </head>
    <body>
    <h1>Welcome to nginx!</h1>
    <p>If you see this page, the nginx web server is successfully installed and
    working. Further configuration is required.</p>
    
    <p>For online documentation and support please refer to
    <a href="http://nginx.org/">nginx.org</a>.<br/>
    Commercial support is available at
    <a href="http://nginx.com/">nginx.com</a>.</p>
    <i class="fa fa-hand-grab-o" style="font-size:48px;color:red"></i>
    <i class="fa fa-camera-retro"></i>
    <br>
    <p><em>Thank you for using nginx.</em></p>
    </body>
    </html>

  2. 通过浏览器访问服务器。

    http://[ECS IP]/index.html

    浏览器返回如图1所示,则证明图标正常使用

    图1 访问nginx

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问