vue-admin-template 集成 iconfont 实例

最新推荐文章于 2023-06-14 18:38:26 发布

南京小菜

最新推荐文章于 2023-06-14 18:38:26 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： iconfont vue-admin-temp

本文链接：https://blog.csdn.net/shi860715/article/details/114519824

版权

vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

文章目录

vue-admin-template 集成 iconfont 实例
- - 1 下载图标库

vue-admin-template 集成 iconfont 实例

1 下载图标库

在这里插入图片描述

1.1 将文件拷贝到项目中

将文件拷贝到项目后的目录结构

在这里插入图片描述

1.2 修改main.js

这里是需要修改main.js,这样iconfont这个资源包，可以被各个模块引用

import '@/assets/css/icon/iconfont.css' # 这里是我的本地路劲，用户需要根据自己的目录结构进行路劲的替换

在这里插入图片描述

1.3 iconfont 的使用


      <i class="iconfont ">&#xe6dd;</i>
      <i class="iconfont iconbitian"></i>

1.4 效果图

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

南京小菜

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue项目引入iconfont图标

eqizhihui的博客

10-07

2294

点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。

vue-admin-template:vue管理模板

03-07

vue管理模板 English | 具有Element UI，axios，iconfont，权限控制和lint的最小vue管理员模板现场演示： : 当前版本是在vue-cli上构建的v4.0+ 。如果要使用旧版本，可以将分支切换到，它不依赖于vue-cli 构建设置 # clone the project git clone https://github.com/PanJiaChen/vue-admin-template.git # enter the project directory cd vue-admin-template # install dependency npm install # develop npm run dev 这将自动打开建造 # build for test environment npm run build:stage # build for

参与评论您还未登录，请先登录后发表或查看评论

vue-admin-template中左上角logo让其显示、修改为自定义图片

CSDN_XHC的博客

05-07

4797

目录显示logo修改logo 显示logo 1. 找到settings.js文件，找到sidebarLogo(侧边栏logo) 2. 修改sidebarLogo的值为true 修改logo 1. 找到src/layout/components/Sidebar目录下的Logo.vue 2. 在logo那里填写自己的图片路径 3. 在Logo.vue中您不仅可以修改图片路径，还可以修改相关样式，让自己的样式更漂亮 ...

vue-admin-template史上最强权限按钮+动态菜单栏+SpringBoot

weixin_44406041的博客

07-15

4121

史上最强实现vue-admin-template动态菜单栏以及按钮权限实现

vue引入本地iconfont图标字体

lilongwei4321的博客

09-11

3629

1、下载iconfont图标至本地 2、项目中新建文件夹，并把以下文件放到文件夹中 3、打开app.vue页面，import引入对应的地址 <template> <div id="app"> <router-view/> </div> </template> <script> export

vue-admin-template-master.zip

02-21

"vue-admin-template-master.zip" 是一个包含了一个使用 Vue.js 和 Element-UI 搭建的后台管理模板项目的压缩包。这个模板工程的核心功能和知识点包括： 1. **Vue CLI**：Vue.js 提供的命令行工具，用于快速初始...

vue-admin-template配置快捷导航的代码（标签导航栏）

10-14

在使用vue-admin-template作为前端开发框架时，经常会遇到需要配置快捷导航的需求，即标签导航栏。标签导航栏能够帮助用户快速在不同的视图之间切换，提高工作效率。本文详细介绍了如何在vue-admin-template中配置...

vue-element-admin 集成框架设置中文语言

最新发布

11-10

在"vue-element-admin 集成框架设置中文语言"这个主题中，我们主要讨论如何在vue-element-admin项目中实现中文语言的集成。Element UI本身提供了多语言支持，包括中文，因此在vue-element-admin中设置中文语言并不...

详解vue-template-admin三级路由无法缓存的解决方案

10-15

在Vue.js应用中，特别是在使用Vue-template-admin框架时，可能会遇到三级路由无法缓存的问题。这个问题的核心在于Vue的`<keep-alive>`组件，它用于缓存组件实例，以提高性能并减少不必要的重新渲染。然而，当涉及到...

vue-admin-template 模板

03-28

Vue-admin-template 是基于 Vue.js 构建的一个管理后台模板，为开发者提供了一个快速搭建企业级后台应用的基础框架。在描述中提到的 "vue-admin-template 模板纯净版"，意味着这个模板是精简版的，没有包含过多的...

vue项目使用iconfont（本地下载、彩色icon）

weixin_41292470的博客

08-13

1636

1.下载至本地 1.下载iconfont文件，包含iconfont.ttf、iconfont.css 2.iconfont.ttf 文件转base64 3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置 @font-face { font-family: "iconfont"; src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) form

vue +admin + template 修改导航菜单SVG的坑

qq_46058838的博客

06-14

259

你引用的图标当选中后没有改变颜色，这个时候要修改svg里边的内容l。把图标保存在icons-svg下的文件内，根据自己需求自定义名字。1、项目引用 iconfont 图标需要单独下载SVG。第二步：在router组建下修改自定义的svg名称。修改后一切正常，恭喜你成功完成了以上操作，加油。替换svg内所有的fill为stroke。第三步：下载PNG保存到项目内，一起完成。写入自己命名的svg放在合适的位置。第一步：可以修改图标颜色。第二步：可以调整图标大小。

ivue-admin中自定义图标问题进行处理

I'm LINKSINKE

12-21

452

介绍：vue-admin是基于vue.js开发的一个后台管理的框架（这里不多说）问题：在处理自定义图标的时候，出现了下面的两个问题：首先是要导入自定义的图标文件其次是class命名问题一、解决图标导入的问题（参考）关于自定义的图标选择可以使用阿里的矢量图标库，利用github账号直接注册一个，将需要用到的图标加入到购物车里进行添加到项目里就行了，引用的方法有两种，一种是在线引用，另一...

详细分析 vue-admin-template

热门推荐

cyt

08-02

3万+

vue-admin-template流程分析！

从vue-element-admin框架中，学习如何优雅地使用icon

qq_26780317的博客

09-18

1988

前言：本文主要记录一下，从vue-element-admin框架中，学习到使用icon的经验。希望以后，可以运用到自己的项目中。一、前端icon的发展史在远古时代，大部分图表都是用img来实现的。这样会使一个页面的请求资源中，图片img占了大部分，为了优化有了image sprite就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用css的background-position定位显示不同的icon图标。 &nbs

SpringBoot和Vue跨域问题

樱桃白馒头

08-10

527

Access to XMLHttpRequest at 'http://localhost:8301/admin/vod/user/info?token=admin-token' from origin 'http://localhost:9528' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

vue-admin-template后台管理系统模板

少女与飞剑的博客

10-25

4386

vue-admin-template是一个极简的 vue admin 管理后台。它只包含了** Element UI & axios & iconfont & permission control & lint**，这些搭建后台必要的东西。可以在github或者gitee上下载到模板。这里以GitHub为例介绍。下载地址根据下载地址可以下载到最新版本的模板，但是也提供旧版本的下载。在分支中选择tag/3.11.0即可下载旧版本。

Vue3 项目引入阿里 iconfont 图标和字体

weixin_42365757的博客

11-02

1万+

Vue3 项目引入阿里 iconfont 图标和字体

vue-admin-template讲解

08-29

在vue-admin-template项目中，入口文件是项目的入口。在入口文件中，我们可以看到当前使用的是mock数据，同时全局挂载了element-ui以及在vue的实例中挂载了路由和store(vuex)。接下来的步骤是讲解路由。使用vue ...