iconfont

chatgpt

Iconfont 是阿里巴巴公司提供的一个矢量图标管理平台，它允许你在项目中使用自定义的矢量图标。你可以选择已有的图标库，也可以上传自己的 SVG 图标，然后将这些图标以字体文件的形式引入到项目中使用。以下是在 Vue.js 中使用 Iconfont 的基本步骤：

创建 Iconfont 项目： 首先，你需要在 Iconfont 官网创建一个项目，选择需要的图标库，或上传自己的 SVG 图标。
选择图标并生成字体文件： 在 Iconfont 项目中，选择你需要的图标，然后将它们添加到购物车。完成后，点击购物车中的 "生成字体" 按钮，然后选择 "下载至本地" 选项。这将会下载一个压缩文件，里面包含了字体文件和样式文件。
解压并引入字体文件： 解压下载的压缩文件，里面应该包含字体文件（通常是 .woff、.woff2、.ttf 等格式）和样式文件（通常是 .css 文件）。将这些文件放置在你的项目中的适当位置。
在 Vue 组件中使用图标： 在你的 Vue 组件中，通过添加相应的类名来渲染 Iconfont 图标。
```
<template>
  <view>
    <i class="iconfont icon-heart"></i> 
  </view>
</template>

<style>
/* 引入 Iconfont 样式文件 */
@import url('path/to/iconfont.css');
</style>
```
注意，上述代码中的 icon-heart 是你在 Iconfont 项目中为图标生成的类名，这个类名可以在 Iconfont 的样式文件中找到。

通过这些步骤，你就可以在 Vue.js 项目中使用 Iconfont 提供的矢量图标了。记得根据实际情况修改文件路径和类名。

示例

一、创建项目

创建项目便于后续维护

打开我的项目
新建项目
打开官方素材库中任意一个
选择任意一个图标
添加入库
打开购物车
添加到项目
选中项目后点击确定
我的项目
项目目录
解压后，将文件复制到vue项目中

将后缀为css tff woff woff2 的文件复制到vue项目中

修改路径

打开iconfont.css文件，原文中的路径是

@font-face {
  font-family: "iconfont"; /* Project id 4216212 */
  src: url('iconfont.woff2?t=1692344938675') format('woff2'),
       url('iconfont.woff?t=1692344938675') format('woff'),
       url('iconfont.ttf?t=1692344938675') format('truetype');
}

修改为项目中的路径，例如：

@font-face {
  font-family: "iconfont"; /* Project id 4216212 */
  src: url('~@/static/workbench/iconfont/iconfont.woff2?t=1692344938675') format('woff2'),
       url('~@/static/workbench/iconfont/iconfont.woff?t=1692344938675') format('woff'),
       url('~@/static/workbench/iconfont/iconfont.ttf?t=1692344938675') format('truetype');
}

引用css文件

在vue文件中引用样式路径

<style>
    @import url("~@/static/workbench/iconfont/iconfont.css");
</style>

使用和效果

```

<style>
    i {
    font-size: 500rpx;
    }
</style>
```

13.1 iconfont

iconfont

chatgpt

示例

一、创建项目

results matching ""

No results matching ""