字体图标的使用【购物车】

方法1

    <link rel="stylesheet" href="2购物车/iconfont.css"><style>*{padding: 0;margin: 0;}li{width: 90px;height: 40px;background-color: pink;margin: 0 auto; list-style: none;text-align: center;line-height: 40px;}a{text-decoration: none;}</style>
</head>
<body><ul><li><a href=""><span class="iconfont icon-gouwucheman"></span><span>购物车</span><span class="iconfont icon-xiangxia"></span></a></li></ul>
</body>

方法2


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="2购物车/iconfont.css"><style>*{padding: 0;margin: 0;}li{width: 90px;height: 40px;background-color: pink;margin: 0 auto; list-style: none;text-align: center;line-height: 40px;}a{text-decoration: none;}li a span::before{这个也是必须写的font-family: 'iconfont';这里面写代码content: "\e600";}li a span::after{font-family: 'iconfont';content: "\e601";}</style>
</head>
<body><ul><li><a href=""><span>购物车</span></a></li></ul>
</body>
</html>

字体图标的使用【购物车】相关推荐

从零开始学前端：字体图标的引入 --- 今天你学习了吗？（CSS：Day18）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:定位 - 今天你学习了吗?(CSS:Day17) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
如何导入阿里巴巴字体图标
1.将字体图标加入至购物车 2.添加至项目 3.下载至本地 4.将fonts文件放入项目src/assets文件夹中 5.在main.js(全局js)中 import './assets/font3/ ...
# 一、阿里矢量图标(字体图标)网址：https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右
一.阿里矢量图标(字体图标) 网址:iconfont-阿里巴巴矢量图标库 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解 ...
如何使用字体图标做一个淘宝购物车案例
一:如何使用字体图标代码如下运行效果: 二:字体图标的线上用法首先在阿里图标库:https://www.iconfont.cn/ 中找到自己想要的图形添加入库,在购物车中把素材添加到项目,然后在 ...
第104天：web字体图标使用方法
字体图标经常使用的是阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 一.阿里库字体图标使用第一步: 首先进入阿里巴巴矢 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
Vue.js-Day07【项目实战(附带完整项目源码)-day02：学习能力、字体图标（使用步骤）、在vue.js中使用jQuery】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
iconfont 图标转为字体_iconfont字体图标的使用方法--超简单!
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

字体图标的使用【购物车】

字体图标的使用【购物车】相关推荐

最新文章

热门文章