2. 程式人生 > 實用技巧 >如何在Bootstrap中使用iconMoon字型圖示

如何在Bootstrap中使用iconMoon字型圖示

阿新 • • 發佈：2020-10-14

關於在bootstrap中如何使用iconMoon圖示：
1.首先找到iconMoon官網,然後點選import icons匯入你的svg圖示
在這裡插入圖片描述
2.匯入成功進入以下介面,點選Preferences
託阿布
FontName代表圖示的名字,ClassPrefix代表圖示的類名字首，我這裡叫ico-。
圖示名字也可以自定義我這裡叫ly,下面的字元編碼最好不要動，設定完成後點選右下角的Download下載到本機。
3.解壓之後會看見這麼一個資料夾
在這裡插入圖片描述
這裡有4個字尾名不同檔案,我們這裡將這個資料夾匯入webStrom編輯器，這裡我用的是之前的字型圖示,就懶得重新匯入了在這裡插入圖片描述
然後html程式碼，注意著這裡的class一定要是你之前設定的類名字首加你的圖示名字，比如我之前的圖示名字叫ly,類名字首是ico-，

所以這裡我的class就是ico-ly在這裡插入圖片描述
然後css程式碼,這裡偽元素裡面的content：‘’裡面寫之前在coMoon網站處理的圖示的字元編碼，比如之前我是e900,所以conten裡面要寫"\e900"
在這裡插入圖片描述
最後結果展示，圖示成功出現
在這裡插入圖片描述

相關推薦

如何在Bootstrap中使用iconMoon字型圖示

關於在bootstrap中如何使用iconMoon圖示： 1.首先找到iconMoon官網,然後點選import icons匯入你的svg圖示2.匯入成功進入以下介面,點選PreferencesFontName代表圖示的名字,ClassPrefix代表圖示的類名字首，我

C# Winform 中使用字型圖示

http://www.bubuko.com/infodetail-1923328.html 需要將 &#x 替換成 \\u 最終是\\ue603 //使用方法protected override void OnShown(EventArgs e)

阿里巴巴向量圖示庫專案中使用svg格式字型圖示使用方式及封裝

1.簡單上手應用 一、在阿里巴巴向量圖示庫官網裡面建立自己的專案，在裡面新增自己專案得圖示。（具體如何新建專案新增圖示不是本文重點可自行百度）

webpack-development配置-下載阿里字型圖示 並配置到webpack中

技術標籤：webpack-配置webpackjavascript 首先在阿里字型圖示庫選好需要的字型，然後下載到本地，解壓得到 找到如下圖的五個檔案，並新增到自己的專案中

uniapp中，設定圖示字型為漸變色

技術標籤：uniapp+微信小程式vue.jscss3 <text class="nz-iconfont nz-iconhouse fund-icon"></text> // 要設定漸變色的圖示，fund-icon自定義類名

記錄小程式中使用阿里字型圖示的步驟

技術標籤：css3css 一、使用步驟 1、登入阿里巴巴字型圖示庫2、搜尋自己想要的字型圖示3、加入到購物車中4、購物車中的圖示加入一個專案中5、在資源管理中找到我的專案，下載到本地6、將解壓出來的檔案目錄中拷

vue.js iview打包上線後字型圖示不顯示解決辦法

在vue+cli專案中使用iview元件及icon圖示，打包後icon不顯示,解決辦法： 1.在build資料夾下找到utils.js檔案，把publicPath改為 ../../

在 Vue 中編寫 SVG 圖示元件的方法

在考慮了將向量圖示從圖示字型遷移到內聯 SVG 的 原因 之後，我在 Vue.js 中找到了一個用 SVG 替換圖示字型的解決方案，同時仍能保持使用圖示字型的靈活性和易用性——能夠使用 CSS 輕鬆改變圖示的大小、顏色以及其

十步搞定uni-app使用字型圖示的方法

uni-app簡介 uni-app是一個使用Vue.js開發跨平臺應用的前端框架，開發者編寫一套程式碼，可編譯到iOS、Android、H5、小程式等多個平臺。

win10系統在photoshop軟體中新增字型庫的方法

PS是設計師常用的一款圖片處理軟體，在製作圖片過程中需要不同的字型來滿足設計者的需求，這樣才能製作出漂亮精美的作品。那麼win10系統如何在photoshop軟體中新增字型庫？新手對新增字型的方法不是很熟悉，今天小編

Spring Boot使用layui的字型圖示時無法正常顯示解決辦法

在html檔案使用字型圖示並且預覽時正常，但是啟動工程後顯示不正常，瀏覽器除錯介面顯示字型檔案無法decode：Failed to decode downloaded font: xxxxx如圖所示：顯示結果：原因：經過maven的filter，會破壞font檔案

淺析Bootstrap中Tab（標籤頁）的使用方法

Bootstrap 導航元素使用相同的標記和基類，改變修飾的class，可以在不同的樣式間進行切換如\".nav-pills\"（膠囊式導航）與 “.nav-tabs” （標籤式導航）

前端工程師-字型圖示-Unicode

前言 由於字型圖示的問題，引發了我對編碼探究的想法 1.字符集與字元編碼（計算機）

如何更換Windows中命令提示符（cmd）中的字型

前言 CMD（命令提示符），全稱“Command Prompt”；對於這個東西我相信大部分用電腦的人基本都知道，因為常常會用到一些基本的DOS命令進行一些電腦的基本檢視處理；但是我相信一些用這個東西的人其實有一種苦惱，那就

詳解Vue+elementUI build打包部署後字型圖示丟失問題

錯誤描述： Vue+elementUI build打包部署後字型圖示丟失，控制檯顯示檔案element-icons.woff和element-icons.ttf檔案404

前端不求人系列——自己製作一個Icon字型圖示

圖片格式的icon圖示有很多缺點，例如放大時會失真，圖片體積大，不支援變色等，這篇文章會手把手指導你如何將一個png、jpg等圖片格式的icon轉換成字型檔案的圖示

Vue elementui字型圖示顯示問題解決方案

問題如下 在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders,fallback: \'vue-style-loader\',publicPath: \'../../\'

怎麼在VUE中引入iconfont圖示

背景 自己看著自己之前的方引入圖示的方法.看著有些疑惑. 於是,自己整理了下引入的流程.以免再次疑惑.如果你正好在網上查詢如何在VUE中引入iconFont圖示.那麼這篇文章也許對你有用.

阿里字型圖示使用方法詳解

　　阿里團隊是讓人非常佩服的團隊，不僅僅是技術，更是理念。 　　字型圖示是開發web常用的元素，阿里為前端開發人員準備了大量的，而且免費的字型圖示庫。現在就記錄下如何使用阿里字型圖示庫的詳細步驟。

java: 讀取字型檔案(ttf, ...)中的字型名

int i = 101; File[] fileList = new File(\"E:\\\\fonts2\").listFiles(); for(File f:fileList) { //System.out.println(f);