uni-app字体图标及设置背景图片

uni-app是一种跨平台开发框架，支持使用字体图标。使用字体图标可以有效减小应用体积，提高加载速度，并且可以根据需求调整图标的颜色、大小等。

步骤如下：

1. 在项目中找到static文件夹，创建一个新的文件夹，例如fonts，用来存放字体图标相关文件。

2. 从网上下载合适的字体图标库，例如阿里巴巴矢量图标库（https://www.iconfont.cn/）中的字体图标库。

3. 将下载的字体图标库文件解压，将其中的字体文件（通常是一个后缀为.ttf的文件）复制到刚才创建的fonts文件夹中。

4. 在uni-app的根目录下找到manifest.json文件，在"App"节点下添加一个"fonts"节点，并配置相关信息，例如：

   "fonts": {
     "resource": [
       {
         "path": "/static/fonts/iconfont.ttf",
         "name": "iconfont"
       }
     ]
   }
    
   

5. 在需要使用字体图标的页面中，通过css引用字体图标，例如：

   @font-face {
     font-family: 'iconfont';  /* 与manifest.json中的name要一致 */
     src: url('/static/fonts/iconfont.ttf') format('truetype');
   }
   
   .iconfont {
     font-family: 'iconfont' !important;
     font-size: 20px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
    
   

6. 在页面中使用字体图标，例如：

   <template>
     <view>
       <text class="iconfont"></text>
     </view>
   </template>
    
   

   注意：这里的是字体图标对应的Unicode值，可以在下载的字体图标库中找到相应的Unicode值。

   通过以上步骤，就可以在uni-app中使用字体图标了。只需要修改对应的Unicode值，即可使用不同的图标。

 

在uni-app中设置背景图片可以通过以下步骤实现：

1. 在项目的静态资源文件夹（通常为static文件夹）下，创建一个名为images的文件夹（可以自定义）。
2. 将要设置为背景图片的图片文件放入images文件夹中（必须是带有后缀名的图片文件，如.jpg、.png等）。
3. 在需要设置背景图片的页面的<style>标签中，使用background-image属性来设置背景图片。

   <style>
     .container {
       background-image: url('/static/images/background.jpg');
       background-size: cover;   /* 背景图片自适应容器大小 */
       background-repeat: no-repeat;  /* 背景图片不重复 */
       background-position: center center;  /* 背景图片居中显示 */
     }
   </style>
    
   

4. 在页面的模板代码中，添加一个使用背景图片的容器，并为该容器添加一个自定义的类名。

   <template>
     <div class="container">
       <!-- 页面内容 -->
     </div>
   </template>
    
   

5. 运行项目，查看页面是否成功设置了背景图片。

请注意，/static是uni-app中的静态资源路径，而/static/images/background.jpg是具体图片的路径，根据你的项目结构进行相应的修改。

此外，你还可以根据需要设置背景图片的其他样式属性，如background-size、background-repeat、background-position等。