Vue CLI引入iconfont字体

最新推荐文章于 2023-04-17 10:35:43 发布
最新推荐文章于 2023-04-17 10:35:43 发布
阅读量422 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/120543568
版权

阿里巴巴矢量图标库 VueCLI iconfont 字体下载 组件集成
关键词由CSDN通过智能技术生成

1. 字体下载

打开iconfont-阿里巴巴矢量图标库

搜索要用的图标，选定后添加入库，从库中添加到项目，然后下载到本地。

2. 将下载到本地的字体文件解压缩后放入vue cli的assets文件夹中，重命名为font。

3. 在main.js中引入

// 引入iconfont字体
import './assets/font/iconfont.css'

4. .vue组件中使用

<i class="iconfont icon-back"></i>

页面：

 

每一天，每一步
关注
专栏目录
vue-cli3 项目中引入iconfont图标
我要成为一个前端大牛
03-29 1480
1.https://www.iconfont.cn/在网站中新建一个项目 2.将图标加入该项目中 3.选择添加至项目-选中你新建的项目 4.下载至本地 5.解压后 6.在项目-src-assets中新建文件夹icon，将解压后的文件放进去 7.修改iconfont.css文件 这里方括号内的icon-map就是一开始新建项目时的前缀 [class^="icon-map"], [class*=" icon-map"]/*这里有空格*/ { font-f
新版vue-cli 4.2如何引入新字体
weixin_43736435的博客
04-13 1617
1、首先下载tff格式的字体 2、在src中新建文件夹common，把下载的tff字体文件放在common中，并在common中新建样式文件font.css进行如下编辑 @font-face{ font-family: "newfont"; src: url(./AvantGarde\ Book.ttf); font-weight: normal; font-sty...
Vue项目11：Vue Cli项目中使用IconFont图标
大头皮鞋的博客
08-12 913
本博文主要介绍如何在VueCli项目中使用IconFont图标，分别介绍在线和离线的使用方法。 新建VueCli项目：vueiconfont C:\Users\Administrator>f: F:\>cd Study\test\iconfonttest F:\Study\test\iconfonttest>vue init webpack vueiconfo...
vue引入本地iconfont图标字体
lilongwei4321的博客
09-11 3629
1、下载iconfont图标至本地 2、项目中新建文件夹，并把以下文件放到文件夹中 3、打开app.vue页面，import引入对应的地址 &lt;template&gt; &lt;div id="app"&gt; &lt;router-view/&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export
使用：iconfont图标（vue-cli方式创建的项目）
qq_38969618的博客
10-08 221
在iconfont官网上选择对应的图标，点击添加入库-》添加至项目-》选择“Unicode”，并点击“下载至本地”-》在src目录的static目录下新建font文件夹，并将上步下载的文件复制里面-》修改iconfont.css文件中src的引入路径（为相对路径如, ./static/font/xxx）-》App.vue中引入iconfont.css文件-》页面中通过class属性使用即可。 <!--通过class类名使用：先写固定的iconfont类，之后写对应图标的类名--> <v
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue CLI项目中，我们通常会将`iconfont`的CSS样式和字体文件引入到项目中。然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法...
vue iconfont.css,vue项目中使用 iconfont
weixin_42168265的博客
08-04 1349
1. iconfont网站，将图标添加到项目，并下载到本地2. 在src/assets/文件下，新建iconfont文件夹，将字体文件放入其中3. 在iconfont.scss中将下载下来的文件 iconfont.css中的内容，复制到 iconfont.scss中，注意修改 路径1 @font-face {font-family: "iconfont";2 src: url('../ico...
Vue 第三方字体图标引入 Font Awesome的方法
12-10
通常，对于Vue CLI创建的项目，这个配置文件是`main.js`或`app.js`。在这些文件中引入Font Awesome的SCSS文件： ```javascript import 'font-awesome/scss/font-awesome.scss'; ``` 这行代码会将Font Awesome的...
vue-cli4.x创建企业级项目的方法步骤
11-20
- 下载 Iconfont 字体图标到 `src/assets/Iconfont` 目录。 - 在 `main.js` 中引入 `iconfont.css`： ```javascript import './assets/Iconfont/iconfont.css' ``` - 在 HTML 或 Vue 组件中使用图标类，例如：...
在vue项目中正确使用iconfont的方法
10-17
在项目中引入iconfont.css样式文件，一般是在Vue项目的入口文件main.js中进行。通过import语句引入该CSS文件，例如： ```javascript import './assets/iconfont/iconfont.css' ``` 这种方式确保了在任何Vue组件使用...
Vue 项目导入字体文件
weixin_42754922的博客
04-17 3677
要想实现UI设计师设计的原型效果，有时候需要用到一些特殊的字体，在项目中就需要导入相关的字体文件。本文章以平方字体为例。
使用vue-cli搭建项目的使用，需要引入font-icon文件，报错的解决办法
weixin_41647577的博客
05-09 256
报错内容是这样的 于是乎，我就找到了我引入文件的地方，路径是这样写的： 我的项目结构是这样的： 按理说，应该是没毛病呀？？？ 我就是在网上搜了好多资料，觉得是和webpack配置相关，但是又不知道改什么。因为我是用vue-cli搭建的项目，好多东西都配置的差不多了，所以不需要改变什么，但是我还是去找了他的相关配置，在build->webpack.base.conf.js中也找到了...
vue-cli3以上使用Iconfont-阿里巴巴图标矢量库
splx2013的博客
06-04 879
添加资源 到阿里矢量图官网搜索想要的图标，选取想要的矢量图标加入购物车，打开购物车选择创建项目或者添加到项目，然后在我的项目里点击下载到本地，至此我们得到大致如图文件 其中，demo_index.html为教你怎么用这些矢量图的方法，打开我们选第二种方法Font Class。 具体用法为，在你的项目的public文件夹下引入矢量图资源 引入之后，我们在public文件夹下的index.html假如我们要引入矢量图的代码，此处有教程，具体为：<link rel="stylesheet" href="&
vue-cli引入外部字体，自定义名称应用到全局
shawxlee的CSDN博客
02-23 485
1、`src/assets`下新建文件夹`fonts`，将所有外部字体文件放入其中……
vue前端项目引入iconfont阿里图标的四种方式
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
vue2引入阿里巴巴矢量图标库字体
qq_55996699的博客
11-29 991
vue引入字体
Vue项目中引入字体图标（详细讲解）
weixin_41432139的博客
07-17 3864
Vue项目中引入字体图标（详细讲解）
vue-cli项目引入字体包
weixin_43829905的博客
11-29 1954
vue-cli项目引入字体包vue-cli项目引入字体包 vue-cli项目引入字体包 1.先下载字体文件所需的.ttf文件 2.将字体文件引入 自己定义一个文件夹，放入下载好的.ttf文件，新建一个font.css文件 font.css文件代码 @font-face { font-family: "hyxm"; src: url('./hyxm.ttf'); //ttf文件路径...
vue项目引入字体.ttf
热门推荐
lilongwei4321的博客
08-02 6万+
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-sty...
vue2引入iconfont
最新发布
09-05
要在Vue2中引入iconfont，可以按照以下步骤进行操作： 1. 首先，在iconfont官网上选择需要的图标，并将其加入购物车。 2. 在购物车中，选择“symbol”作为图标引入方式，并勾选“下载到本地”选项。 3. 解压下载的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值