苏州网站建设思创,网络推广怎么做才有效,响应式布局有几种方法,莱芜十大首富文章目录 1. 概念2. 阿里图标 iconfont2.1. 网址2.2. 使用方法2.3. 注意事项2.3.1. 原因 3. font-awesome 图标3.1. 网址3.2. 使用方法 1. 概念
本质就是一个字体#xff0c;可以灵活修改它的样式#xff0c;降低服务器请求的次数#xff0c;同时相比图片更加清晰。
2. 阿… 文章目录 1. 概念2. 阿里图标 iconfont2.1. 网址2.2. 使用方法2.3. 注意事项2.3.1. 原因 3. font-awesome 图标3.1. 网址3.2. 使用方法 1. 概念
本质就是一个字体可以灵活修改它的样式降低服务器请求的次数同时相比图片更加清晰。
2. 阿里图标 iconfont
2.1. 网址
阿里图标官网地址https://www.iconfont.cn/
2.2. 使用方法 将下载好的字体包拖到项目中。 引入字体包中的 css 样式。 挑选类名来展示图标。 下载的文件也有使用方法可以按照教程来。 2.3. 注意事项
在修改字体图标的时候不要用元素选择器进行修改建议用对应的类选择器。
2.3.1. 原因
.iconfont也有样式如下如果使用元素选择器修改字体图标的字体大小会修改不了因为样式类选择器优先级比元素选择器优先级高。
.iconfont {font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}3. font-awesome 图标
属于在线字体库不需要下载字体包直接在线引入。
3.1. 网址
https://fontawesome.com/
3.2. 使用方法
将font-awesome拖到项目中。引入包中的 css 样式。在网站中查找对应的图标直接复制过来。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- 引入font-awesome,css包 --link relstylesheet href./fontawesome/css/all.min.css //headbody!-- 挑选对应的图标,粘贴过来 --i classfa-solid fa-house/ii classfa-brands fa-github/ii classfa-brands fa-qq/i/body
/html
