公司网站怎么免费建,青岛做网站eoe,成都旅游景点推荐,唐山网站建设策划方案矢量库 一、如何下载iconfont图标。
在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。
鼠标悬浮上后会出现三种选择#xff1a; 1.添加入库#xff1a;功能和淘宝中的购物…矢量库 一、如何下载iconfont图标。
在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。
鼠标悬浮上后会出现三种选择 1.添加入库功能和淘宝中的购物车一样可以添加多个图标进行操作。. 2.收藏 同样可以选择多个自己喜爱的图标放在”我的收藏”中避免以后找不到。 3.下载图标选择单个图标进行下载可下载为SVG格式、PNG格式和AI格式。 下载的基本上都是压缩包的形式。解压后即可引入。下面我们了解一下如何引入inconfont图标。
二、如何引入iconfont图标 引入iconfont可以在线上引入和本地引入。 主要的引入方式有icon单个引入(本地引入)、unicode引入、font-class引入、symbol引入。 1.icon单个使用。 用户直接下载SVG、AI、PNG格式的图标。然后在源码中直接引用。如img src”” SVG格式则是下载之后推荐使用谷歌浏览器打开右击选择查看网页源代码。 选择svg ……/svg的所有内容进行复制。将代码粘贴到要显示的前端页面中利用css可进行高宽的修饰等。 此种方式适合用在图标引用特别少以后也不需要特别维护的场景。 比如设计师用来做demo原型。 前端临时做个活动页。 当然如果你只是为了下载图标做PPT,也是极好的。 不过如果是成体系的应用使用建议用户把icon加入项目然后使用下面三种推荐的方式。 2.unicode引用(线上) unicode是字体在网页端最原始的应用方式特点是 兼容性最好支持ie6及所有现代浏览器。 支持按字体的方式去动态调整图标大小颜色等等。 但是因为是字体所以不支持多色。只能使用平台里单色的图标就算项目里有多色图标也会自动去色。 第一步拷贝项目下面生成的font-face 点击添加至项目后自行创建一个项目如demo。 复制代码粘贴至前端页面的style/style中。 // 前一定要加上 http: 第二步定义使用iconfont的样式 .iconfont{font-family:iconfont !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;} 第三步挑选相应图标并获取字体编码应用于页面 i classiconfont#xe625;/i 示例代码如下 stylefont-face {font-family: iconfont; /* project id 617401 */src: url(http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot);src: url(http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot?#iefix) format(embedded-opentype),url(http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.woff) format(woff),url(http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.ttf) format(truetype),url(http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.svg#iconfont) format(svg);}.iconfont {font-family:iconfont !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/style/headbodyi classiconfont#xe625;/i/body
3.font-class引入 font-class是unicode使用方式的一种变种主要是解决unicode书写不直观语意不明确的问题。 与unicode使用方式相比具有如下特点 兼容性良好支持ie8及所有现代浏览器。 相比于unicode语意明确书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标所以当要替换图标时只需要修改class里面的unicode引用。 不过因为本质上还是使用的字体所以多色图标还是不支持的。
第一步引入iconfont.css文件 引入css文件可以用线上也可以用本地的本地的需要下载文件线上引入可直接在项目中复制地址。 1.引入本地的iconfont.css文件 下载压缩包文件解压找到文件夹中的iconfont.css件 复制粘贴到本地项目的文件夹css中 然后在源代码的style/style上面写link标签引入外联样式表iconfont.css
link relstylesheet typetext/css hrefcss/iconfont.css 2.引入线上iconfont.css 找到自己创建的项目找到font-class复制代码到源代码中引入外联样式表iconfont.css
第二步挑选相应图标并获取类名应用于页面 打开下载的压缩包文件夹找到demo_fontclass.html使用浏览器打开复制所用图标的类名。粘贴至所用的页面代码中。
i classiconfont icon-kefu/i 或者在项目中直接复制图标的类名: 示例代码如下 head!--引入线上css文件--link relstylesheet typetext/css hrefhttp://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.css!--引入本地css文件--link relstylesheet typetext/css hrefcss/iconfont.cssstyle/style/headbodyi classiconfont icon-kefu/i/body/html
4.symbol引用 这是一种全新的使用方式应该说这才是未来的主流也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合与上面两种相比具有如下特点 支持多色图标了不再受单色限制。 通过一些技巧支持像字体那样通过font-size,color来调整样式。 兼容性较差支持 ie9,及现代浏览器。 浏览器渲染svg的性能一般还不如png。 Symbol引用也可以在本地或线上引用参照font-class的引用方式即可。 第一步引入iconfont.js文件 引入本地iconfont.js文件
script srcjs/iconfont.js/script 引入线上iconfont.js文件 第二步加入通用css代码引入一次就行 style typetext/css.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}/style 第三步挑选相应图标并获取类名应用于页面 使用浏览器打开文件找到图标的类名并按下例格式引用到页面代码中 svg classicon aria-hiddentrueuse xlink:href#icon-kefu/use/svg 同font-class一样也可以直接复制项目中的类名 示例代码如下 headstyle typetext/css.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}/style/headbodysvg classicon aria-hiddentrueuse xlink:href#icon-kefu/use/svg!--本地引用js文件--script srcjs/iconfont.js/script!--线上引用js文件--script srchttp://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.js/script/body 使用以上方法iconfont就可以显示在页面上啦没显示那就在看一遍。这可能是最全的引入iconfont的方法了 引用时出现显示的是方框或者没有显示。原因是iconfont更新了新的图标,此时需要同时更新iconfont的链接。如果没有更新链接,那么就会造成引用不到的原因,然后就变成小方框了。
