HTML 引用小图标

阿里巴巴矢量图标库里有各种类型小图标，引用这些图标代替绘制或PS很方便。

阿里巴巴矢量图标库

将需要的图标加到自己项目里，会生成链接代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="http:at.alicdn.com/t/font_1589646_bkvz4lg4k0h.css">  <!-- 生成的链接，每次新添加图标后都要更新 --><style>*{padding: 0;margin: 0;list-style: none;}.box1{width: 654px;height: 40px;padding: 10px;border: 1px solid black;margin: 50px auto;position: relative;}.box1 .input1{width: 530px;height: 40px;float: left;padding-left: 10px;border-top: 1px solid #b8b8b8;border-left: 1px solid #b8b8b8;border-bottom: 1px solid #cccccc;border-right: none;outline: none;display: block;position: relative;}.box1 .but1{width: 110px;height: 42px;float: left;border: none;background: #3385ff;color: white;cursor: pointer;display: block;}a{text-decoration: none;}.box1 .iconfont{position: absolute;font-size: 25px;top: 18px;}.ft1{right: 130px;color: #a6a6a6;}.ft2{right: 55px;color: white;}</style>
</head>
<body><div class="box1"><form action="" method="POST"><input type="text" class="input1"><input type="button" class="but1"><!-- 相机图标 --><i class="iconfont icon-xiangji ft1"></i>    <!-- <i class="iconfnt 对应图标代码  (自定义)"></i>  自定义类名，方便修改样式 --><a href="http://www.baidu.com"><!-- 搜索图标 --><i class="iconfont icon-sousuo ft2"></i></a></form></div>
</body>
</html>

HTML 引用小图标相关推荐

html怎么引用小图标,Css引用图标方法.html
zico-基于CSS方式引用 zico 逐浪优秀图标集CSS经典方法引用简介 zio是一个非常优秀的webfont与svg图标展示系统,它的目标是让全栈开发者与用户可以自由的任何页面引用矢量级的图标 ...
html网站雪碧图素材,webpack雪碧图实现（webpack管理小图标素材）
雪碧图也叫CSS精灵, 是一CSS图像合成技术,这里介绍webpack实现雪碧图这是我的文件目录: // 在上个实例项目上增加了icons文件夹: // dist/sprites/目录是后面执行we ...
用Font Awesome代替网页icon小图标
1. 引言网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说--"我们用的都是彩色的,不是黑白的" ...
文字前的小图标HTML,Font Awesome实现文字链右边加一个箭头图标
在上一篇文章里介绍了用css背景图实现文字链右边加一个箭头图标的方法,本文将介绍用Font Awesome实现文字链右边加一个箭头图标的方法. Font Awesome是一个图标字体库,包含300多种 ...
移动端可移动小图标（vue版）
移动端可移动小图标(vue版) 新建vue(backFirst) <template><div class="back-first-page"><di ...
将图片转换成svg文件，自定义icon小图标，svg速成
将图片转换成svg文件,自定义icon小图标,svg速成一.svg是什么? 二.操作步骤 1.进入网站 2.将svg复制 3.引用svg文件总结一.svg是什么? SVG是一种图像文件格式,它的 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
浏览器地址栏中显示自定义小图标及什么是网站 ICO 图标？
所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是Favicon的全部,根据浏览器的不同 ...
使用font-awesome小图标
引言网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说--"我们用的都是彩色的,不是黑白的"--别 ...

HTML 引用小图标

HTML 引用小图标相关推荐

最新文章

热门文章