学习笔记——自定义字体、自定义Icon

emmaFeng
2,689 阅读3分钟

在前端开发过程中，经常会遇到需要自定义的场景，例如自定义字体，自定义字符图片等。在此记录一些使用过的工具（网址）。

一、自定义字体

  1. 先从网上下载想要用的字体
  2. 在字体转换网站上，转换成目标文件格式的字体文件 www.fontsquirrel.com/tools/webfo…
  3. 在样式文件中，使用 @font-face 定义字体名称及文件引用路径（可使用多个 @font-face ，定义多个自定义字体）
  4. 在使用时，直接通过 font-family 使用自定义字体
// 自定义字体
@font-face {
    font-family: 'digital7Mono';
    src: url('../font/digital-7mono.woff') format('woff');
}

字体效果：

二、自定义icon

自定义icon有两种方式：一种是纯自定义icon，即UI设计师直接提供svg文件，由自己转换成icon使用；另一种是通过iconfont网站实现自定义icon添加

（一）纯自定义icon

  1. icomoon.io/app 网页生成图标文件及样式文件
  • 上传.svg文件（文件名需要是英文名）
  • 修改打包文件名称 menu
  • 修改图标前缀为 ivu-icon-icon-（针对iview Ui库，进行的前缀修改）
  • 下载文件压缩包

2.将下载的图标文件与项目文件整合

  • 在src文件夹下新建common文件夹，其下包含fonts, style文件夹
  • 将下载文件包中的fonts文件夹下内容，拷到common/fonts文件夹内
  • 将下载文件包中的style.css文件，拷到common/style文件夹内
  • 将style.css文件内关于fonts内文件的路径，修改为当前文件目录中的引用路径

3.自定义icon的使用

  • 在相关使用的位置，通过Icon标签，使用class名称，例如，需要使用ivu-icon-icon-people，则将icon-people作为class名称使用。
  • 原因：iview在编译Icon标签时，会给class名称自动添加ivu-icon-前缀，此时，能够正确引用自定义icon

4.style.css文件引用

  • 在app.vue中引用样式文件 @import './common/style/style.css';

（二）使用iconfont网站实现自定义icon添加

主要参考这篇文章：《vue+iView 引入iconfont》，进行icon添加。 1.新建一个项目或者使用已有项目，将需要的图标先添加购物车，再添加到目标项目中。这里需要注意的是，一个项目当中用到的图标尽量放到一个项目文件夹中，如果文件夹中的图标有增加的情况，以下步骤需要重新进行操作。 2.图标管理 —> 我的项目，选择目标项目，选择Font class，下载至本地 3.将解压文件夹内的5个文件，放入本地项目中，项目目录结构如图：

4.修改css文件中的路径，在文件引入的地方加上 ./，如图：

5.全局引入iconfont

// 在main.js中全局引入
import './assets/iconfont/iconfont.css';

6.具体使用

// 一定要先加上iconfont这个classname，后面的icongirl为iconfont.css中的自定义icon的classname
<Icon class="type-icon" custom="iconfont icongirl"></Icon>

三、文字滚动效果

html标签即可实现

<marquee behavior="scroll" scrollamount="3" > 文字内容文字内容文字内容 </marquee>

marquee标签详解： www.cnblogs.com/jianmeng/p/…

avatar
文章
阅读
粉丝