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

2024-11-27 10:46:03

vue项目中(本地)使用iconfont字体图标

这里有使用前的准备和三种使用方式介绍，参考这里

还有 vue中手动封装iconfont组件（三种引用方式的封装）

开始使用

点击下载到本地

在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件

解压下载到本地的字体图标文件，放到 iconfont 文件夹下

如过项目中没有下载 css-loader 依赖包，就进行下载，否则会报错

npm install css-loader -D

然后引入样式并使用即可。

<template>
  <div style="background-color:cadetblue;color:#333;padding:30px">
    <p><i class="iconfont"></i> Unicode </p>
    <p><i class="iconfont icon-fanhuidingbu"></i> Font class </p>
    <p style="font-size:2em;">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fanhuidingbu" rel="external nofollow" ></use>
      </svg> Symbol </p>
  </div>
</template>

<script>
// Font class
import "../assets/iconfont/iconfont.css";、
// Symbol
import "../assets/iconfont/iconfont.js";
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
* {
  font-size: 24px;
}
/* 下面的样式可以单独写，然后引入 */
@font-face { /* Unicode  */
  font-family: "iconfont";
  src: url("../assets/iconfont/iconfont.eot");
  src: url("../assets/iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
    url("../assets/iconfont/iconfont.woff2") format("woff2"),
    url("../assets/iconfont/iconfont.woff") format("woff"),
    url("../assets/iconfont/iconfont.ttf") format("truetype"),
    url("../assets/iconfont/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 1em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

效果如下：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

Vue项目中使用自定义字体样式方式

目录 Vue使用自定义字体样式步骤一步骤二步骤三步骤四全局自定义字体,提高项目字体美化 1.创建font文件夹 2.创建index.css 3.全局注册 4.页面使用 Vue使用自定义字体样式步骤一拿到自定义字体包首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包. 步骤二在项目文件夹中进行放置自定义字体包的配置在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中: 新建一个font.c
vue项目中Toast字体过小,没有边距的解决方案

目录 vue Toast字体过小,没有边距解决办法 vue使用Toast最简单方式 1.安装并引入mint-ui 2.引入Toast 3.使用Toast vue Toast字体过小,没有边距 1.前段时间在写项目的时候使用 vant 组件库比较多,在使用vant中Toast时,在Chrome中手机模拟中测试正常,但是当网页放到手机中时字体显示特别小,但是你在vue文件中怎么添加样式都没有用: 2.问题的原因可能是我之前写的那种rem适配方案的问题: 解决办法在项目 App.vue 文件中添加
vue项目设置活性字体过程(自适应字体大小)

目录 vue项目设置活性字体起因我们来看看详细步骤吧效果 vue项目引入特殊字体特殊字体指的是默认电脑中没有的 vue项目设置活性字体起因最近,博主在按照ui设计稿参数编写页面之后,发现页面整体偏大,尤其是字体现实的特别大,但是在按UI设计的页面尺寸展示的时候却十分舒服,这是怎么回事,在和另一位前端交流之后,得知可以动态设置字体大小,即不同页面有不同的大小的字体十分灵活. 首先,我们要清楚字体设置比较常用的三个单位px,rem,em px是一个大小单位,相当于1像素,这要写死就是固定
vue 引用自定义ttf、otf、在线字体的方法

1. 将下载好的字体放到本地目录分别是两种字体放到项目的 assets 目录中 2. 引入字体文件首先创建一个 styles 文件夹,之后也可以用于存放一些公共的样式文件.再新建一个 index.less 文件,引入字体. @font-face { font-family: Snickles; src: url('../assets/Snickles-webfont.ttf'); } @font-face { font-family: Ronda; src: url('../assets/
vue中响应式布局如何将字体大小改成自适应

目录响应式布局将字体大小改成自适应 vue文字大小自适应问题响应式布局将字体大小改成自适应 1.在app.vue的生命周期函数中添加一段代码来设置页面的rem mounted: function() { // 页面开始加载时修改font-size var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.doc
vue-quill-editor如何设置字体大小

目录 vue-quill-editor设置字体大小 vue-quill-editor 样式问题 vue-quill-editor设置字体大小项目中需要用到富文本编辑器,用的Vue,所以选择了vue-quill-editor这个富文本编辑器,发现字体只有几种大小可以选择,满足不了产品的需求,研究了半天终于改好了.主要是需要更改配置文件,以及对应的CSS和js文件. editor.vue 页面下改变 toolbarOptions的配置项 (editor.vue就是封装的富文本编辑器) const
在vue项目中(本地)使用iconfont字体图标的三种方式总结

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

1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3.下载至本地 4.把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下(可创建一个css文件或iconfont文件) 5.在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css' 6.在在vue文件中引用<i class="iconfont icon-zitigui-xianx
解决在vue项目中webpack打包后字体不生效的问题

最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法. 但是,就算使用框架,有些时候还是要用到的,比如: Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候,就要自己实现这个功能啦. 第一种方式:最普通的手动监
详解Shell脚本中调用另一个Shell脚本的三种方式

主要以下有几种方式: Command Explanation fork 新开一个子 Shell 执行,子 Shell 可以从父 Shell 继承环境变量,但是子 Shell 中的环境变量不会带回给父 Shell. exec 在同一个 Shell 内执行,但是父脚本中 exec 行之后的内容就不会再执行了 source 在同一个 Shell 中执行,在被调用的脚本中声明的变量和环境变量, 都可以在主脚本中进行获取和使用,相当于合并两个脚本在执行. 第一种:fork 特点:会生成子PID而且可重复被
vue中向data添加新属性的三种方式小结

目录向data添加新属性的三种方式原理分析三种方式 vue组件 data等属性介绍向data添加新属性的三种方式原理分析首先在了解这三种方式之前,我觉的有必要说一下,为啥不能直接手动给data中的对象添加属性呢? 下面咱们一块分析下: vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式: const obj = {}; let val = 'kk' Object.defineProperty(obj,'na
.net中捕捉全局未处理异常的三种方式示例

前言: 我们在实际项目开发中,经常会遇到一些不可预见的异常产生,有的异常在程序运行时就对其进行处理(try) 但是,有的程序不需要每一个地方都用try进行处理,那么针对这种情况,可以参照下面的方式,实现对异常的统一抓取处理,下面话不多说了,来一起看看详细的介绍吧. 方式一.Page_Error处理页面级未处理异常作用域:当前的.aspx页面描述:在需要处理的aspx页面的cs文件中,实现Page_Error方法,达到侦听当前页面未处理的异常 protected void Page_Error
详解mpvue小程序中怎么引入iconfont字体图标

前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库将图标加入购物车搜索关键词可以是中文也可以是英文下载素材点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码文件解压一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot
javascript中为某个元素指定事件的三种方式

在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使用addEvenListener()方法三种方法的比较 (1)在第二.三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以. (2)首选第二.三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容. 一些语法细节 (1)在第一种方法中,onclick大小写
vue项目中使用rimraf dev启动时删除dist目录方式

目录使用rimraf dev启动时删除dist目录 vue修改dist目录使用rimraf dev启动时删除dist目录适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录 webpack.dev.conf.js 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge =

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

目录

vue项目中(本地)使用iconfont字体图标

开始使用

相关推荐

随机推荐