在uniapp中怎么使用icon图标

第一段：准备资源

首先需要准备好所使用的icon图标资源，可以从iconfont等网站下载到自定义的图标资源，或者运用现成的图标资源库。在使用icon前，需要在项目中引入所需文件。

<!-- 引入字体图标相关文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/icon/iconfont.css">

常见的icon是字体图标和 SVG 图标。其中，前者主要用于图标快速适配不同屏幕大小、颜色，后者则支持复杂形状图标、矢量形状。在这里讲解的是字体图标的使用。

第二段：使用icon

在uniapp中，采用以下两种方式来使用字体图标：通过class类名或者通过插件的方式。

<!-- 通过class类名的方式使用 -->
<i class="iconfont icon-shengdan"></i>

<!-- 通过插件的方式使用 -->
<uni-icons type="fontawesome" name="instagram"></uni-icons>

本例中，我们通过class类名来使用字体图标，其中 `iconfont` 是我们引入的字体图标库， `icon-shengdan` 则是图标的类名。

第三段：样式调整

通过给字体图标设置样式，可以调整图标的大小、颜色等属性。

<!-- 样式调整 -->
<i class="iconfont icon-shengdan" 
style="font-size:50px;color:red;"></i>

在这个例子中，我们通过font-size属性调整图标的大小，在color属性中设置图标的颜色。

第四段：总结

通过上述方式，我们就可以在uniapp项目中轻松使用字体图标了。注意，在使用图标之前，需要在项目中引入字体图标相关文件，如果没有使用现成的图标库，我们还需要自定义图标资源。