精华内容
下载资源
问答
  • 字体图标

    2021-03-09 21:29:48
    字体图标 字体图标的产生 精灵图的使用是有许多优点的,但是缺点也很明显 比如: 图片文件比较大 图片本身放大缩小会失真 一旦图片制作想更改很复杂 此时,有一种技术出现很好解决这问题,就是字体图标 iconfont ...

    字体图标的产生
    精灵图的使用是有许多优点的,但是缺点也很明显
    比如:

    1. 图片文件比较大
    2. 图片本身放大缩小会失真
    3. 一旦图片制作想更改很复杂
      此时,有一种技术出现很好解决这问题,就是字体图标 iconfont

    字体图标:展示的是图标,本质是文字


    字体图标的优点

    • 轻量级:一个图标比一系列图像要小,一旦字体加载,图标马上渲染出来,减少服务器请求
    • 灵活性:本质是文字,可以改变颜色、大小等效果
    • 兼容性:几乎支持所有浏览器

    字体图标使用
    1. 字体图标下载
    推荐网站
    icomoon字库https://icomoon.io/
    该字库成立较早,内容种类繁多,但是是国外网站,打开较慢
    阿里 iconfont字库https://www.iconfont.cn/

    这里以icomoon字库为例

    1. 打开网站,点击右上方紫色按钮
      在这里插入图片描述

    2. 可以看到需要图标,选中想要的,点击右下方Generate Font再下载Download

    在这里插入图片描述

    2.字体图标引入(引入到我们的html中)

    1. 把下载包里的fonts文件夹放入页面根目录

    在这里插入图片描述
    2.在CSS样式中全局声明字体

    @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?nxyuay');
      src:  url('fonts/icomoon.eot?nxyuay#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?nxyuay') format('truetype'),
        url('fonts/icomoon.woff?nxyuay') format('woff'),
        url('fonts/icomoon.svg?nxyuay#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
    

    在这里插入图片描述
    3.打开demo.html在这里插入图片描述
    4.在html标签内添加小图标
    如下复制想要的图标对应的方框

    在这里插入图片描述
    粘贴方框并在style里声明font-family

    在这里插入图片描述


    3.字体图标的追加(以后添加新的小图标)
    如果想新增图标,可以再打开网址点击左上方import icons

    在这里插入图片描述
    找到原来下载的文件夹,打开如下selection.json

    在这里插入图片描述
    选择yes
    在这里插入图片描述
    然后就可以继续追加然后重新下载文件,覆盖原文件夹即可。

    展开全文
  • 字体 图标

    2018-11-12 09:20:45
    1:推荐http://www.iconfont.cn/下载 字体图标 2:搜索需要的图标 3选择svg下载 4:<link rel=“stylesheet” href=“文件位置” 5:同时在span标签里设置class=“iconfont 图标名字”;例如 ...

    1:推荐http://www.iconfont.cn/下载 字体图标
    在这里插入图片描述
    2:搜索需要的图标在这里插入图片描述
    3选择svg下载在这里插入图片描述
    4:<link rel=“stylesheet” href=“文件位置”在这里插入图片描述
    5:同时在span标签里设置class=“iconfont 图标名字”;例如在这里插入图片描述在这里插入图片描述

    展开全文
  • 谷歌字体图标material字体图标iconfont版本下载,从iconfont下载,不需要使用者去注册账号,找图标,选择图标下载图标,侵删

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,373
精华内容 4,549
关键字:

字体图标