vue项目中cdn引用font-awesome字体图标

最新推荐文章于 2024-08-31 08:37:15 发布

怪哈哈

最新推荐文章于 2024-08-31 08:37:15 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/guairena/article/details/104997329

版权

vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文介绍如何在 Vue.js 项目中引入并使用 Font Awesome 图标库，包括在 HTML 文件中引入 CSS 文件，以及如何在 Vue 组件中动态渲染图标。提供了具体的代码示例，展示了如何通过后端返回的数据动态改变显示的图标。

摘要由CSDN通过智能技术生成

1、首先在index.html中head标签中引入

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2、其次在具体页面使用

<i class="fa fa-camera-retro"></i>

3、浏览器显示
在这里插入图片描述

具体使用哪个图标移步官网http://www.fontawesome.com.cn/

通过后端返回进行菜单图标的渲染：
在这里插入图片描述

render (h, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      // vnodes.push(<i class="fa fa-camera-retro"></i>)
      // 图标显示
      vnodes.push(<i class={icon}></i>)
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }