奥森图标的基本使用方法

作者：代码独立开发者 | 2024-01-30 19:43:46

踩

奥森图标

奥森图标官网
1.下载：进入奥森图标官网之后，点击“立即下载”将这个Font Awesome图标字体库和框架下载在自己的电脑上。
这里写图片描述
2.使用：
a.新建一个html文件，做好初步布局：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="font-awesome.css" rel="stylesheet" />
<style type="text/css">
p{font-size:40px; color:red;}
</style>
</head>

<body>
    <p>这里是主页</p>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14

b.打开下载好的文件夹，赋值font文件夹和css文件夹里的font-awesome.css文件到页面所在的文件夹里，然后在代码中加些内容：
（以在页面中添加一个汽车图形为例：）
在奥森图标官网中找到你想要用的图标，复制它对应的名字，如：
这里写图片描述

粘贴在所需要引用的位置，一般用<i></i>或<em></em>标签引用。

<body>
    <p>这里是主页<i class="fa fa-car"></i></p>
</body>1
2
3

此时打开font-awesome.css文件，发现路径部分信息是：
这里写图片描述

而此时font文件夹和当前html文件属于同级文件，所以要将路径修改正确：
这里写图片描述

注：这些图标的大小和颜色也可以通过css方法修改：p{font-size:40px; color:red;}
注：奥森图标的大小是通过设置嵌套i标签父级元素的“font-size”属性来改变的，并不是设置宽、高
此时就OK啦，打开页面就会是这样：
这里写图片描述

上面就是关于奥森图标的基本使用方法，更多更详细的用法可以在官网上学习。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/48765