webpack中使用iconfont字体图标的方法

入坑webpack，开始加载一些图片、js文件什么的都没有报错，今天正好下了iconfont字体，就出现了错误，所以这里分享一下怎么在webpack中使用iconfont。

1、修改css中字体文件路径

我把css和字体文件放在同级目录下

打开iconfont.css文件，原本的字体文件引用路径是用的css的方式，即下面图片中所示的

同级目录：直接用文件名

上一级目录：../

但是，我们是在webpack环境下使用，所以要改成webpack引用规则，即改成下面图片所示

同级目录： ./

上一级目录： ../

2、配置如何加载woff等字体文件

大家都知道webpack要配置loader，声明如何加载某类文件，所以我们要在config中声明一下

使用之前要安装url-loader、file-loader

在webpack的配置文件的loaders中配置

字体文件最后会以字符的形式保存在css文件中

以上这篇webpack中使用iconfont字体图标的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • webpack配置导致字体图标无法显示的解决方法
赞 (0)

相关推荐

  • webpack配置导致字体图标无法显示的解决方法

    问题:在项目开发时使用字体图标,报错如下: 所有的字体图标都不能正常显示了,报错提示不能解码字体. 解决问题:找了很久,最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误:在 webpack.base.conf.js文件中删除 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, 总结: 其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译,自己写的和自动生成的产生冲

  • webpack中使用iconfont字体图标的方法

    入坑webpack,开始加载一些图片.js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont. 1.修改css中字体文件路径 我把css和字体文件放在同级目录下 打开iconfont.css文件,原本的字体文件引用路径是用的css的方式,即下面图片中所示的 同级目录:直接用文件名 上一级目录:../ 但是,我们是在webpack环境下使用,所以要改成webpack引用规则,即改成下面图片所示 同级目录: ./ 上一级目

  • vue中引用阿里字体图标的方法

    想在vue中引用阿里的iconfont,却出现报错 ,原因是没有对应的loader处理字体文件. 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 在Vue中使用icon 字体图标的方法

    1.使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个. 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹

  • Android中正确使用字体图标(iconfont)的方法

    Android中正确使用字体图标(iconfont)的方法

    字体图标 字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适用 2. 可以减少项目和安装包的大小(特别你的项目中有很多图片icon时,效果将是M级) 3. 几乎可以忽略屏幕大小和分辨率,做到更好的适配 4. 使用简单 -- 缺点:        1. 只能是一些简单的icon,不能代替如背景图.9图等资源 2. 一些需要文字说明的icon,图片资源将会是更好

  • 在vue项目中(本地)使用iconfont字体图标的三种方式总结

    在vue项目中(本地)使用iconfont字体图标的三种方式总结

    目录 vue项目中(本地)使用iconfont字体图标 开始使用 vue项目中(本地)使用iconfont字体图标 这里有使用前的准备和三种使用方式介绍,参考这里 还有 vue中手动封装iconfont组件(三种引用方式的封装) 开始使用 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错 npm in

  • 十步搞定uni-app使用字体图标的方法

    uni-app简介 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台.   uni-app框架由Dcloud即数字天堂(北京)网络技术有限公司推出,该公司主要产品有Web开发IDE Hbuiler.HbuilderX,前端框架mui.uni-app,增强版的手机浏览器引擎H5plus等. uni-app中使用字体图标图标的下载 首先去阿里图标库选择要用的图标,并且打包下载下来,步骤如下 1. 2. 3. 4.

  • BootStrap glyphicons 字体图标实现方法

    BootStrap glyphicons 字体图标实现方法

    相关阅读: 详解Bootstrap glyphicons字体图标 先给大家说下什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标. 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接. 使用bootstrap很久了,内置的 glyphicons 图标,足以满足 小型项目的需求.只需要使用一个样式,即可调出图标.虽然感觉很神奇,一直没

  • 在线使用iconfont字体图标的简单实现

    在线使用iconfont字体图标的简单实现

    目录 使用准备 三种使用方式介绍 unicode引用 font-class引用 symbol引用 在线使用 点击生成代码 完整使用代码 vue项目(本地)使用iconfont字体图标 vue中手动封装iconfont组件(三种引用方式的封装) 使用准备 进入 阿里巴巴矢量图标库 ,登陆以后,搜索需要的图标,然后点击添加入库 进入“我的图标库”(右上角购物车),点击添加至项目 点击 + 图标创建一个新项目,然后把新图标加入到新项目中.(也可以按需添加到已有项目) 进入我的项目,即可看到如下界面 三

  • 在python image 中安装中文字体的实现方法

    如果一些应用需要到中文字体(如果pygraphviz,不安装中文字体,中文会显示乱码),就要在image 中安装中文字体. 默认 python image 是不包含中文字体的: mac-temp:relation_graph test$ docker run --rm -it python bash root@36d738e2084c:/# fc-list /usr/share/fonts/truetype/dejavu/DejaVuSerif-Bold.ttf: DejaVu Serif:st

  • 在Vue.js中加载字体的正确方法

    在Vue.js中加载字体的正确方法

    添加字体不应该对性能产生负面影响.在本文中,我们将探讨在 Vue 应用程序中加载字体的最佳实践. 正确声明 font-face 的字体 确保正确声明字体是加载字体的重要方面.这是通过使用 font-face 属性来声明你选择的字体来实现的.在你的 Vue 项目中,这个声明可以在你的根 CSS 文件中完成.在进入这个问题之前,我们先来看看 Vue 应用的结构. /root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff

随机推荐