HTML小图标的使用(无需下载图标源码)

我们在浏览一个网页中，会遇到很多有趣的小图标，这些小图标与访问者形成了友好的互动，所以我们在开发中都会适当插入一些生动有趣的图标来吸引访问者。插入图标的网站有很多，我这里以阿里巴巴图标库（iconfont-阿里巴巴矢量图标库）为例来讲解无需下载图标源码去使用小图标，大多都是下载源码到本地文件夹里在写入一些CSS样式在通过link去引用很麻烦。

第一步：我们在网上输入阿里巴巴图标库进入首页在搜索栏搜索你想要的图标

我这里直接输入了搜索就弹出很多样式的搜索小图标。我们再选择一个喜欢的样式点击它把它加入购物车，你会看到右上角的类属于购物车的图标点击去。

把图标加入到自己创建的项目中，没有创建项目就点击新建项目(在加入项目右边那个按钮)，再点击确认。

加入后会弹出 Unicode这个界面我们切换到Font class页面，我们再点击查看在线连接。再把Font class下面的代码复制下来。

第二步：我们进入编译器里面（我这里使用的hbuder x编译器编译器小巧轻便，不占很多运行内存），然后在头文件head标签里插入link外部连接，在后面 href 后面粘贴你刚刚复制的代码

再到阿里巴巴图标库的图标项目里面，随便找个喜欢的图标复制它的代码。

再到body标签插入i标签，class类后面属性是图标代码也就是上面你复制那个图标的代码，空格后面是iconfont是字体图标，也就是说后面你要用图标的格式iconfont是必须加的，

这样我们就能使用图标了，如果要给图标加CSS属性我们就在style里面设置，格式是（一个点加图标代码）我这里设置了个鼠标悬停到图标上给他变白色并加背景黑色（悬停hover）。

没有悬停悬停的样子

注意了！注意了！如果在阿里巴巴图标库的图标项目里面新加了其他图标记住要点击下更新代码并把这个新的代码去替换你最初复制这个的代码(复制到 link 标签href去替换之前的代码)。小本子记住这个很关键，不替换的话你新增的图标无法显示！

作者制作不易，记得多多支持一下，谢谢！

HTML小图标的使用(无需下载图标源码)相关推荐

windows平台下载android源码
最近在看<android内核剖析>,很多细节不具体看代码很难理解,记住了印象也不深,感觉还是跟着源码走一遍好些,回来下载android源码,遇到不少问题,终于开始下载了,整理下流程,鉴于网 ...
linux下下载openwrt源码,OpenWrt下载编译
不想啰嗦直接肝,依次执行: git clone git://github.com/openwrt/openwrt.git cd openwrt ./scripts/feeds update -a ./ ...
下载论坛源码GBK UTF8 BIG5分别是什么意思
下载论坛源码GBK UTF8 BIG5分别是什么意思? 提问者:ly1987520 | 浏览次数:4010次下载论坛源码简体中文GBK 简体中文UTF8 繁体中文BIG5 分别是什么意思?他们的区别 ...
python爬虫05 - BeautifulSoup4的安装，下载，源码简介，使用。
1. bs4简介 1.1 基本概念 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的网页信息提取库 1.2 源码分析 • github下载源码 • 安装 • pip inst ...
PHP网页代理cc攻击无需对接版源码
介绍: PHP网页代理cc攻击无需对接版源码源码目录 index.html 首页 cc.php 核心文件 count.php 使用统计 pv.php 访问测试页面 ip.txt 代理IP数据 ...
帝国CMS虚拟商城源码自动发货网盘下载俄罗斯源码博客风格
帝国CMS虚拟商城源码自动发货网盘下载俄罗斯源码博客风格支持游客下单,无需登录,发货为网盘下载形式系统版本:帝国CMS7.5 UTF-8 服务器:win/linux 语言:PHP 数据库:MYSQ ...
在线教育专业建站工具 EduWind ，源码下载，源码分享网整理
在线教育专业建站工具 EduWind ,源码下载, Eduwind是由北京水木信步网络科技有限公司开发的网校服务,公司位于清华科技园.目前,EduWind的产品系列包括以下两大版本: EduWind网 ...
下载Android源码流程（完整版）
要在Linux环境下操作,要在Linux环境下操作,要在Linux环境下操作~~ 不要想在Windows环境下操作,因为会有各种问题.Windows环境的童鞋又不想装双系统的可以跟着下面的操作,L ...
【Android WebSocket】Android 端 WebSocket 基本用法 ( 下载 Java-WebSocket源码 | 导入 Java-WebSocket-1.5.2 工程作为依赖 )
文章目录一.下载 Java-WebSocket 源码二.Android Studio 工程导入 Java-WebSocket 源码使用 https://github.com/TooTallNat ...

HTML小图标的使用(无需下载图标源码)

HTML小图标的使用(无需下载图标源码)相关推荐

最新文章

热门文章