封裝字體圖標庫

參考瞭如下博客:css

https://blog.csdn.net/Doulvme/article/details/54290450web

https://blog.csdn.net/qq_25479327/article/details/77167585chrome

https://blog.csdn.net/muzidigbig/article/details/80371341markdown

查找圖標並下載

1.打開阿里的矢量字體圖標庫(http://iconfont.cn/collections)並登錄.svg

2.搜尋須要的圖標加入購物車.字體

3.點擊購物車選擇-->下載代碼.ui

4.解壓編碼

詳細介紹

真正有用的是紅色選中的,剩餘的是使用的演示.url

圖標使用

 1.經過類名方式使用圖標:spa

首先打開iconfont.css,其中紅色標記的地方時能夠修改的,若是移動了文件,寫上正確的url路徑.

其中類名icon是給圖標添加樣式的,本身能夠改

 

2.經過svg標籤方式

 

<script src="iconfont.js"></script>
<
svg class="icon" aria-hidden="true"> <use xlink:href="#icon-15tianwuliyoutuihuo"></use> </svg>

第一種方式咱們修改了iconfont.css中的類名也不會影響svg的使用,由於第二種方式是不使用類名的,因此不會影響.

第二種方式咱們須要引入iconfont.js文件.而後經過修改#icon- 後面的值得到圖標.圖標的名稱和unicode咱們能夠在.svg後綴的文件夾中查看.

 

 

3.經過使用unicode編碼方式

須要寫入font-face:

 

    <style type="text/css">
        @font-face {font-family: "iconfont";
          src: url('iconfont.eot'); /* IE9*/
          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        } .iconfont {
/*iconfont與@font-face中的font-family的字體名稱保持一致*/ 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; } </style>

</head>
<body>
<div class="main markdown">
<h1>IconFont 圖標</h1>
 <ul class="icon_lists clear">
  <li>

<!--顯示圖標-->

<!--與上面的css中綠色背景類名一致,icon是圖標樣式的類名-->
   <i class="icon iconfont">&#xe606;</i>

<!--顯示文字-->   <div class="code">&amp;#xe606;</div> </li>

相關文章
相關標籤/搜索