美文网首页
字体图标的使用

字体图标的使用

作者: 沐舒萌呀 | 来源:发表于2022-02-12 22:30 被阅读0次

    字体图标的使用(以阿里巴巴矢量图库为例)

    1.字体图标是一些网页常见的小图标    

    字体图标的下载 和 引入

    选择网站: https://www.iconfont.cn (阿里巴巴矢量图库)

    搜索需要的图标——加入购物车——添加到项目——点击确认(confirm)——选择下载(Dowmload Code)——之后选择压缩文件进行解压——选择正确的文件存放位置——之后在 demo_index.html (网页文件中)进行字体图标的引入(下面的步骤中会有详细介绍)

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

    font的存放位置

    2)在css样式中全局声明字体:

    第一步:拷贝项目下面生成的 @font-face

    demo_index.html 文件里的原句 复制

    第二步:定义使用 iconfont 的样式

    demo_index.html 文件里的原句 复制

    第三步:挑选相应图标并获取字体编码,应用于页面

    插入合适的位置完成 引入


    favicon 图标

    一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上

    一 制作favicon 图标(推荐网站)

    https://www.bitbug.net/

    把png图片转换为ico图标

    二,favicon 图标放到网站根目录下

    三,HTML 网页引入favicon 图标

    在html 页面里面<head></head>元素之间引入代码

    <link rel="shortcut icon" href=" /favicon.ico" />

    引入图标时必须要写的

    相关文章

      网友评论

          本文标题:字体图标的使用

          本文链接:https://www.haomeiwen.com/subject/yqmxlrtx.html