vue-cli3 搭配inconfont 图标的使用

最新推荐文章于 2024-08-15 13:53:30 发布
最新推荐文章于 2024-08-15 13:53:30 发布
阅读量2.8k 收藏 2
点赞数 2
分类专栏： vue-cli 文章标签： vue-cli3和iconfont 的搭配使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43653325/article/details/87526910
版权
本文介绍了如何在Vue-cli3项目中使用Iconfont图标库。首先在Iconfont创建项目并下载图标到assets目录，接着在项目内创建icon文件夹，将Iconfont的样式文件改为less并引入到index.less。注意类名不要包含点号，并修正样式文件的相对路径，以确保图标正确显示。
摘要由CSDN通过智能技术生成

目前正在做的项目里面 搭配的是e’le’men’t-ui 但是里面的图标很少, 这里我使用了inconfont 淘宝矢量库
搭配的vue-cli 是3.4

首先再inconfont 里面去添加自己要的图标,并创建一个项目
在这里插入图片描述
这里 选择更多操作里面的编辑项目,
在这里插入图片描述
上面的tax 和taxicon 是自己任意起的名字, 因为项目和税务相关,所以这里我用的是tax 命名外部引入的图标以作区分,然后 把这个项目下载到本地 (最好这里一次性下载到assets 目录里面去. 第一步图标的选择就算完成.

现在在到项目里 去引用 直接上图看项目结构

在这里插入图片描述assets里面去创建一个icon 的文件去放置解压的inconfont 文件 同时 把inconfont.css 的文件复制一份到styles 里面, 把尾缀换成less 也就是styles>inconfont.less
(这里 你可以直接在main.js 里去引入这个inconfont.css,但是我这里 是把index.less 作为样式的引入, 所以我这里是把这个inconfont.less 先引入到index.less 的里面 代码如下:

最低0.47元/天 解锁文章
@玩Go那个玩!
关注
专栏目录
【Vue】Vue3脚手架使用font-awesome字体图标的解决方案
【敦厚的曹操】的专栏
11-09 905
【Vue】Vue3脚手架使用font-awesome字体图标的解决方案
阿里图标库的基本使用
热门推荐
junshangshui的专栏
08-29 4万+
一、进入阿里图标库官网站：http://www.iconfont.cn 二、选择想要的图标加入购物车(如果不想以unicode方式使用图标，那直接下载png等格式即可) 三、然后进入购物车点击下载代码   四、解压后，选择这下图五个文件复制，其它的是demo文件，告诉我们如何使用。   五、我在项目的assets目录下新建了个fonts目录来放这五个文件   六、打...
vue3项目导入阿里图标库iconfont
最新发布
l1965564484的博客
08-15 476
我们需要的就是demo下的这些个文件。
什么是 IconFont？有什么优缺点？
weixin_45119097的博客
11-07 6383
什么是 IconFont？有什么优缺点？
首次添加iconfont和在已有iconfont文件中新增不同iconfont项目图标
07-07 4376
1.下载压缩包解析 2.修改图片中三个文件名字 修改前: 修改后: 3,把修改过的文件放入已经有的iconfont文件中 4. 把iconfont.css中内容引入原本文件
寒假学习记录6：svg图标、iconfont字体图标的使用
前端萌新
01-31 2718
我们只需要这四个文件，然后将这4个文件复制到自己的项目里就行。8.使用iconfont图标，点开html，写入i标签，别的签也写。7.输入默认css样式，直接复制拿去用就行，不用改。7.点开iconfont.css文件，里面长这样。9.使用，套个i标签好一点，不套也没事。1.首先进入阿里巴巴矢量图标库。3.点击购物车，点击添加至项目。2.选择要下载的图标，选择下载。3.点击购物车，点击下载代码。1.进入阿里巴巴矢量图标库。1.进入阿里巴巴矢量图标库。iconfont-阿里巴巴矢量图标库。
vue-cli3-storybook:使用Vue cli 3编写故事书的示例设置
05-13
$ git clone https://github.com/davestaab/vue-cli3-storybook $ yarn $ yarn storybook 手动设置 假设条件 我假设以下版本 $ node -v v8.11.2 $ yarn -v 1.7.0 安装Vue CLI yarn global add @vue/cli vue --...
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
vue-cli-plugin-cordova:Vue Cli 3 Cordova插件
04-22
vue-cli-plugin-cordova 适用于Apache Cordova的插件。 将Cordova集成到Vue Cli App中 如何 创建Vue应用 $ npm install -g @vue/cli $ vue create my-app $ cd my-app $ npm install -g cordova # If cordova is ...
vue-cli-plugin-bootstrap-vue：vue-cli 3插件以添加bootstrap-vue
01-30
vue-cli-plugin-bootstrap-vue ... 使用vue-cli生成项目 vue create my-app 在安装bootstrap-vue插件之前，请确保提交或隐藏所做的更改，以防您需要还原 要安装bootstrap-vue插件... cd my-app vue add bootstrap-vue
vue-cli-plugin-element-Vue CLI 3插件，可在几秒钟内用element-ui构建企业应用程序-Vue.js开发
05-27
vue-cli-plugin-element可以在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该项目不仅是vue-cli插件，而且是vue-cli-plugin-element，可在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该...
Vue3 项目引入阿里 iconfont 图标和字体
weixin_42365757的博客
11-02 1万+
Vue3 项目引入阿里 iconfont 图标和字体
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 2973
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
vue项目中引入inconfont图标
weixin_39559640的博客
12-09 804
vue项目中引入inconfont图标 打开iconfont官网我的项目页面，选择Unicode后，点击下载至本地。 解压download.zip文件。 打开解压后的文件夹，把iconfont.css文件复制粘贴到项目中的css文件夹里。 在项目中创建一个文件夹，然后打开解压后的文件夹，把iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff 四...
设计必备丨ICON素材哪里找 这五个素材库就够了
Mark_Wang1211的博客
02-16 1497
页面设计和特效制作中我们会用到一些ICON图标和插画，但有些ICON不足够精美，今天就来给大家推荐5个ICON素材网站，供大家日常的设计及使用。 1.Iconfont（日常使用必备） Iconfont目前有上千万个icon，相对来说资源较全，而且想要的图标、插画基本都能够在这里搜索到，力荐力荐！但是各位宝宝要注意，iconfont的图标不能商用，需要申请书面授权哦~ 2.icons8（支持中文的国外icon网站） Icons8有多国语言版本，在主页右上角切换为简体中文界面后对中文用户来说更容易找
css自定义字体
weixin_30408309的博客
05-05 259
css自定义字体的兼容问题 来源http://www.w3cplus.com/content/css3-font-face 一、TureTpe(.ttf)格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Saf...
iconfont图标库引入vue3项目及单色多色图标的使用
码农舟舟的博客
08-11 3724
iconfont图标库在vue项目中的使用方法
vue-cli3引入第三方字体文件
骑着代码去流浪
12-09 4985
1，在vue-cli项目目录下创建vue.config.js文件 module.exports = { module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', ...
用vue-cli3导入外部的iconfont.css图标样式遇到的坑:These relative modules were not found:...
weixin_33849942的博客
01-21 6440
错误信息截图: 就是找不到这些字体,从iconfont下载的字体代码 ,会有几个字体文件,你新建个font文件夹在assets 目录里面. 截图如下: 然后要去iconfont.css字体路径 需要改成我们刚刚新建的font文件夹 @font-face {font-family: "iconfont"; src: url('./font/iconfont.eot?t=15480375335...
使用vue-cli3开发Chrome插件全攻略
"这篇文章主要介绍了如何使用vue-cli3来开发Chrome插件，通过vue-cli-plugin-chrome-ext插件实现快速编译打包，并引入了element-ui作为UI框架进行按需加载，以减小插件的文件大小。" Vue CLI 3 是 Vue.js 官方提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值