字体图标库
介绍 :
其实就是把一些矢量图打包成一个字体文件 做成一个字体库 然后把这些编码给对应的类名
1. css样式默认的图标设置
设置font-family 就可以让常规得字符显示出不同的图标 矢量图 跟字体一样 可以改变颜色和大小
body {
font-family: "wingdings";
font-size: 30px;
color: red;
}
html
<body>
wwwww ]]]]]] [[[[[[[[]]]]]]]]
</body>
效果图 :
2. bootstrap图标引入
第一步 :
引入bootstrap 的css
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
怎么下载bootstrap对应的字体图标文件呢?
第二步 :
使用bootstrap图标类名
<span class="glyphicon glyphicon-heart"></span>
效果 :
2. iconlib图标引入
第一步 :
引入对应的iconlib字体样式
<link rel="stylesheet" href="./iconlib/css/font.css">
第二步 :
使用类名
<i class="icon-naozhong"></i>
<i class="www icon-naozhong"></i>
<i class=" aaa icon-naozhong"></i>
效果 :
3. 阿里巴巴图标库使用
第一步 :
进入官网找到图标下载图标包
选择下载代码
或者也可以下载图片
找到对应的 iconfont.css
第二步 :
引入下载的 iconfont.css
<link rel="stylesheet" href="./font_9i26gx9kmt5/iconfont.css">
html
<span class="iconfont icon-iPhoneX"></span>
或者
创建一个空标签
html
<span class="iconfont icon-iPhoneX"></span>
css
span {
font-family: "iconfont";
}
效果 :
2. less组件介绍和使用:
less的优点
LESS是动态的样式表语言，通过简洁明了的语法定义，是编写 CSS的工作变得非常简单。在实际项目开发中，可以大大提升前端工程师的效率！
和CSS的区别 :
CSS（层叠样式表）是一门历史悠久的标记性语言，同HTML一道，被广泛应用于万维网中。HTML主要负责文档结构的定义，css负责文档表现形式或样式的定义。
作为一门标记语言，CSS的语法相当简单，对使用者的要求较低，但同时也带来一些问题：CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码，造成这些困难的很大原因源于CSS是一门非程序语言，没有变量、函数、scop（作用域）等概念。LESS为Web开发者带来了福音
使用 :
注意 :
直接引入less 是没办法让样式生效的 必须对less文件进行编译
方法1
是引入对应的less文件 把之前rel属性里的stylesheet 修改成stylesheet/less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
这里的 less.js 是用来编译less文件的 把less编译成相对应得css文件
官网可以直接复制引用
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
方法2
直接使用vscode里面得插件 只要生成了less文件 或者对less文件进行修改 那么 就会同步生成css文件
使用插件 把less编译成 css文件之后 导入只需要导入css文件即可