Iconfont的簡單使用

iconfont開源矢量圖標字體庫

第一步:選擇你須要的一個圖標或者是多個,讓後選擇加入「購物車」。

第二步:點擊右上角的「購物車」圖標以後,這裏會彈出一個包含你全部選中的圖片。以後你有三種選擇:添加至項目,下載素材,下載代碼。這裏咱們選擇  添加至項目。

說明一下:下載素材就是能夠下載該icon的svg,png,ai等格式。下載代碼就是將icon對應完整的實現代碼以及使用案例下載下來css

第三步:點擊添加項目以後就能夠了,會自動跳轉到你的項目裏面去。(若是新加入icon則以下圖。須要你刷新來跟新代碼)

1:選擇使用unicode方式:html

他unicode模式下的代碼複製本身的css文件中以後:注意給前面加上 "http:"否則有問題。web

而後就能夠在本身的類中添中: font-family: "iconfont" !important:svg

 

 

@font-face {
  font-family: 'iconfont';  /* project id 808917 */
  src: url('http://at.alicdn.com/t/font_808917_qreydq5rbd.eot');
  src: url('http://at.alicdn.com/t/font_808917_qreydq5rbd.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_808917_qreydq5rbd.woff') format('woff'),
  url('http://at.alicdn.com/t/font_808917_qreydq5rbd.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_808917_qreydq5rbd.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

font-family:"iconfont"!important:

在html中使用選擇對應的unicode就能夠了學習

<i class="iconfont">&#xe619;</i>

2:選擇font class方式字體

將font calss下面的路徑複製本身的須要的頁面head部分:如:注意給前面加上 "http:"否則有問題url

<link rel="stylesheet" href="http://at.alicdn.com/t/font_808917_rais7893e6p.css">

而後再頁面中加入 :類名 iconfont 以及圖標對應的類名spa

<i  class=" iconfont icon-wendu"></i>

3:選擇symbol方式code

將fsymbol下面的路徑複製本身的須要的頁面head部分:如:注意給前面加上 "http:"否則有問題。以及引入通用css代碼(引入一次就行):(這種方式在之後是比較好用的,雖然我的喜歡用第一中方式)orm

<script src="http://at.alicdn.com/t/font_809148_a38rdozsusq.js"></script>
<style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
</style>

而後選擇對應名字引入到本身的頁面

<svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-ziwaixian"></use>
</svg>

 

最後:須要注意的是這些都是經過font-family來實現的,因此不支持圖片顏色,只能爲單一顏色,並且能夠經過font-size來改變其大小。

學習借鑑:http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

時間:2018/08/27/19:42:10

相關文章
相關標籤/搜索