登录  /  注册
博主信息
博文 29
粉丝 0
评论 0
访问量 17047
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
字体图标的使用
尹辉
原创
610人浏览过

字体图标

以阿里图标(需要注册,免费试用)为例,网址为:https://www.iconfont.cn/。

  1. 进入阿里图标网站,登录后点击顶部导航菜单中的“素材库” => “图标库”。

  2. 然后在顶部搜索框中输入想要的图标,例如:购物车,选择一个图标,将光标移动到图标上,在弹出的对话框中选择“加入购物车”。

  3. 点击顶部菜单栏中的购物车按钮,进入购物车页面。

  4. 首次进入需要先添加项目,点击右侧菜单中的“添加项目”,创建一个新项目。

  5. 如果以前添加过项目,进入购物车后会提示“添加至项目”,选择已有项目或创建一个新项目。

  6. 进入项目后可以看到刚添加的图标,选择上面的图标格式,一般用“font class”。

  7. 将光标移动到图标上,在弹出对话框中选择复制代码,可以得到这个图标的类名(class),例如:icon-gouwuchekong。

  8. 点击上面的”查看在线链接“,将在线链接复制下来。例如://at.alicdn.com/t/c/font_3961095_cpx4bys0pgo.css

  9. 然后进入编辑器,在文档的<head>中添加<link>语句引入在线图标库:

    1. <head>
    2. ......
    3. <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3961095_cpx4bys0pgo.css">
    4. </head>
  10. 也可以在外部样式文件中引入在线图标库:

    1. /* icon.css */
    2. @import url(//at.alicdn.com/t/c/font_3961095_cpx4bys0pgo.css)
    1. <head>
    2. ......
    3. <link rel="stylesheet" href="icon.css">
    4. </head>
  11. 在文档的<body>中添加一个<span>元素,为其 class 属性添加两个属性值: ”iconfont” 和 “icon-gouwuchekong“:

    1. <body>
    2. ......
    3. <span class="iconfont icon-gouwuchekong"></span>
    4. </body>
  12. 字体图标本质是一种字体,可以试用字体样式来设置其大小、颜色等样式。

    1. .icon-gouwuchekong{
    2. font-size:4rem;
    3. color:coral;
    4. }
  13. 完成后的页面显示效果:

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学