引入iconfont 字体

本文介绍了如何在Web开发项目中下载并管理ttf、woff和woff2字体文件,通过CSS引入,以及使用Webpack的特定loader处理这些文件,确保页面正确引用自定义图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先下载字体到本地
把 ttf、woff、woff2 这三个文件需要copy到项目中 一般是放在静态文件夹里面
下载的文件中有一个iconfont.css 文件,把这个css copy 到项目里面 并在main.js 中引入 (修改css 中ttf woff woff2 文件的路径)

需要添加三个loader 加载器  
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
},
{
    test: /\.(woff2?|woff?|ttf?)$/i,
    use: ['file-loader'],
    
    // wenpack 5 需要加上这句话,webpack 5 新增加了资产模块内容,他会替换字体、图像的加载器
    // 其他版本没有测试(应该不需要)
    dependency: { not: ['url'] },  
}  


页面直接引用
<i class="iconfont icon-quanping_o"></i>
iconfont : 是基类 必须加上
icon-quanping_o :图标名称
### 如何在 Vue 项目中引入 IconFont 字体图标并与其文本和 API 集成 #### 安装依赖项 为了确保开发环境已经准备好,在命令行工具中执行以下指令来全局安装 `@vue/cli`,这一步骤能够帮助确认 Node 环境是否正确安装[^2]。 ```bash npm install -g @vue/cli ``` #### 创建或进入现有 Vue 项目 对于新创建的 Vue 应用程序,可以通过如下命令快速搭建: ```bash vue create my-project cd my-project ``` 而对于已有项目,则直接切换到对应的目录即可继续下一步操作。 #### 引入 IconFont 图标库 前往 [阿里巴巴矢量图标库](https://www.iconfont.cn/) 或其他支持自定义下载的图标的网站挑选所需图标,并按照提示生成适用于 Web 的 CSS 文件。接着将获取到的链接地址加入至项目的公共样式文件(如 `public/index.html` 中 `<head>` 标签内),或者通过 import 方式加载到 main.js 中: ```javascript // main.js import '@/assets/iconfont.css'; // 假设已把 iconfont.css 放置于此路径下 ``` 也可以利用 npm/yarn 来管理第三方资源包的形式完成相同目的: ```bash npm i --save-dev @iconify/vue ``` 随后可以在组件内部按需调用特定类名实现渲染效果。 #### 组件编写实例 下面给出一段简单的例子展示如何在一个名为 `IconText.vue` 的单文件组件里结合使用 IconFont 和来自服务器端的数据接口返回的内容。 ```vue <template> <div class="container"> <!-- 动态绑定 :class 属性 --> <i v-bind:class="[baseClass, iconName]" aria-hidden="true"></i> {{ message }} </div> </template> <script> export default { name: 'IconText', data() { return { baseClass: 'iconfont', // 所有使用的 IconFont 类前缀 iconName: '', // 存储具体图标的名称部分 message: '' // 显示的消息字符串 } }, mounted(){ this.fetchData(); }, methods:{ async fetchData(){ try{ const response = await fetch('http://example.com/api/data'); let result = await response.json(); // 更新状态变量 this.iconName = result.icon; this.message = result.text; // 使用 vm.$set 方法更新数组中的元素以确保响应性 if (Array.isArray(this.someArray)) { this.someArray.forEach((item, index) => { this.$set(this.someArray, index, {...item}); }); } } catch(error){ console.error("Error fetching the resource:", error); } } } } </script> <style scoped> /* 自定义样式 */ .container { display: flex; align-items: center; } .iconfont:before { margin-right: .5em; /* 设置适当间距 */ } </style> ``` 此段代码展示了怎样从远程服务读取 JSON 数据并将其中携带的信息映射给视图层上的相应位置;同时注意到了当处理复杂数据结构比如列表时应采用 `$set()` 函数保证变更被侦测到从而触发 UI 刷新机制[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值