iconfont给旧项目加图标

要给旧项目加图标，可以使用iconfont提供的两种方式：

1. 下载图标字体文件，将文件放入项目中，然后在CSS中引用该字体文件，在HTML中使用相应的class即可显示图标。

2. 使用iconfont提供的SVG代码，在HTML中直接使用SVG代码即可显示图标。

具体的步骤如下：

1. 登录iconfont官网，选择需要的图标，将其添加到项目中。

2. 选择下载方式，选择“Symbol”选项，然后下载字体文件。

3. 解压下载的文件，将字体文件放入项目中，然后在CSS中引用该字体文件。

4. 在HTML中使用相应的class即可显示图标。

例如，如果你想使用一个名为“iconfont-home”的图标，可以在HTML中这样写：

<i class="iconfont iconfont-home"></i>

在CSS中可以这样引用字体文件：

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.ttf') format('truetype');
}

如果你想使用SVG代码，可以在iconfont官网选择SVG代码下载方式，然后将代码直接复制到HTML中即可。

相关问题

vue3项目怎么引用iconfont图标

1. 在iconfont官网上找到需要使用的图标，将其加入购物车。

2. 在购物车中选中需要使用的图标，然后点击右上角的“下载代码”，选择“Symbol”类型，下载代码包。

3. 解压下载的代码包，可以看到其中包含了一个名为“symbol-defs.svg”的文件。

4. 在Vue项目中的public文件夹下创建一个名为“icons”的文件夹，并将“symbol-defs.svg”文件复制到该文件夹中。

5. 在main.js文件中，引入“svg-sprite-loader”和“icons”文件夹中的“symbol-defs.svg”文件：

   import { createApp } from 'vue'
   import App from './App.vue'

   // 引入svg-sprite-loader
   import 'svg-sprite-loader/dist/cjs.js!./icons/symbol-defs.svg'

   createApp(App).mount('#app')

6. 在需要使用图标的组件中，使用“svg”标签和“use”标签来引用图标。例如，引用id为“icon-home”的图标：

   <template>
     <div>
       <svg class="icon">
         <use xlink:href="#icon-home"></use>
       </svg>
     </div>
   </template>

注意：在“use”标签中，使用“xlink:href”属性来指定要引用的图标的id，且该id需要加上“#”前缀。

iconfont图标库

Iconfont图标库是一个由阿里巴巴矢量图标库提供的图标字体库，通过使用Iconfont图标库，可以方便地在Web页面、移动端应用、小程序等各种场景中使用矢量图标。

在使用Iconfont图标库时，需要进行以下步骤：

1. 注册阿里巴巴矢量图标库账号，并创建自己的图标库。
2. 在图标库中选择需要使用的图标，并添加到购物车中。
3. 在购物车中确认需要购买的图标，并进行支付。
4. 在购买成功后，进入“项目管理”页面，创建一个新的项目，并选择需要使用的图标，生成字体文件。
5. 下载字体文件，并在项目中引入字体文件。
6. 在HTML或CSS中使用对应的图标类名，即可使用Iconfont图标。

通过使用Iconfont图标库，可以避免使用图片或SVG等静态图形资源，减少Web页面或移动端应用的加载时间和带宽消耗，同时也可以方便地进行图标的颜色、大小等样式的修改。在小程序中使用Iconfont图标库也同样具有这些优势，可以提高小程序的性能和用户体验。