字体图标的基础使用方法

字体图标的基础使用

用处:
对于小图标进行一些提升和技术优化,但不能完全替代精灵技术。

优点:

  1. 属于字体,内存比图片更小,不会失真。
  2. 可以随意变换颜色和大小外观
  3. 兼容性好,几乎支持所有浏览器

字体图标的下载

下载网站

  1. icomoon字库
  2. 阿里iconfont字库

字体图标的使用

  1. 下载下来的文件改个iconfont的名字
  2. 把整个文件放入index.html的根目录
  3. 在所需页面引入iconfont.css样式表
  4. 在iconfont文件中有一个html文件点开,查找你需要的字体图标,复制它底下的名字
  5. 写一个标签 加上类名iconfont和另一个你要引用的字体图标的名

字体图标的修改

  1. 调用改字体类名修改
  2. 大小和颜色修改与字体修改相同

字体图标的上传与添加

  1. 打开iconfont账号
  2. 点上传图标
  3. 使用将图标SVG文件拖拽至框内上传
  4. 选择去除颜色并提交
  5. 把上传的添加至购物车
  6. 去购物车 选择添加至项目 加入你的项目
  7. 去下载至本地

猜你喜欢

转载自blog.csdn.net/weixin_46466212/article/details/124651706
今日推荐