移动web_字体图标

字体图标

  • 字体图标的优点
    1.他是文本内容，矢量图，放大不会失真
    2.因为是文本所以可以用文本的样式来设置

  • 字体图标与精灵图比较
    1.精灵图可以将多个图存放在一个文件上，所以请求只有一次，但是精灵图存在放大会失真的问题
    2.字体图标因为是矢量图由点、线、面组成，所以不会存在放大失真的问题

字体图标的的下载及使用

iconfont下载链接:

ali-iconfont
icomoon

ali-iconfont使用：
  1. 选择字体图标，加入购物车
  2. 添加至新创建的本地项目
  3. 点击创建项目找到下载至本地按钮
  4. 下载后进行解压缩，解压缩后重命名'iconfont'
  5. 复制到项目的根目录
  6. 项目内引用
<!-- 
1.用link标签引入iconfont.css文件；
2.用i标签承接字体图标，<i class="iconfont icon-xxx"></i>
 -->
<div class="box">
    <div class="iconfont icon-cancle"></div>
  </div>

<!-- 2.通过i标签把unicode编码复制过来 -->
<body>
    <i>&#xe600;</i>
  </body>
icomoon使用：

同上步骤一致,可参考详细使用教程
这里只讲引用步骤

  • icomoon与ali-iconfont 不一样的地方就是icomoon文件中的style.css已经包含了icon的图标字体样式：
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

所以引用的时候不用先写字体图标（这里是'icomoon'）了只需引用字体图标名称即可

在线图标库引用：
  1. 将图标添加到项目，项目会有一个对应的地址
  2. link 加图标地址
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 在线引入字体图标，注意前面要加http: -->
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css"
    />
  </head>

  <body>
    <i class="iconfont icon-zhaoxiangji"></i>
  </body>
</html>

好处：在线图标库不用将图标的资源文件下载到本地，减少本地项目的体积，为以后的项目上线打包做准备；如果添加新的图标，不用再重新下载覆盖。
坏处：如果引用图标的网页链接失效的话，就会影响我们的项目网页

symbol引用（未来的主流）：

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过,来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。
使用步骤如下：
第一步：引入项目下面生成的symbol代码：
如：

 <script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

"text/css">.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>

第三步：挑选相应图标并获取类名，应用于页面：

class"icon""true"usexlink:href"#icon-xxx"use></svg>

如有不足请谅解！希望给您带来帮助。
本文参考来自于 https://blog.csdn.net/muzidigbig/article/details/80371341
posted @   桌子乱码  阅读(42)  评论(0)  编辑  收藏  举报
相关博文：
·  移动web_平面转换
·  精灵图和字体图标
·  CSS精灵图
·  CSS字体图标
·  CSS学习7（）
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
点击右上角即可分享
微信分享提示