CSS \ HTML - 如何將Ionicons添加到CSS「content」屬性？

我正在使用自定義switch切換（來自here），我想添加一個圖標而不是常規文本。當我將Ionicons代碼粘貼到CSS content屬性中時，它顯示爲一個矩形（某種程度上表示字符\字體未找到）。我如何獲得通過這個？CSS HTML - 如何將Ionicons添加到CSS「content」屬性？

編輯：我忘了補充，我已經包括CDN的CSS。

JSfiddle

開關CSS：

.onoffswitch { 
    position: relative; 
    width: 108px; 
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none; 
} 
.onoffswitch-checkbox { 
    display: none; 
} 
.onoffswitch-label { 
    display: block; 
    overflow: hidden; 
    cursor: pointer; 
    border: 2px solid #999999; 
    border-radius: 30px; 
} 
.onoffswitch-inner { 
    display: block; 
    width: 200%; 
    margin-left: -100%; 
    -moz-transition: margin 0.3s ease-in 0s; 
    -webkit-transition: margin 0.3s ease-in 0s; 
    -o-transition: margin 0.3s ease-in 0s; 
    transition: margin 0.3s ease-in 0s; 
} 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
    display: block; 
    float: left; width: 50%; 
    height: 40px; padding: 0; 
    line-height: 38px; 
    font-size: 14px; 
    color: white; 
    font-weight: bold; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.onoffswitch-inner:before { 
    content: "ON"; 
    padding-left: 10px; 
    background-color: #FFFFFF; 
    color: #BABABA; 
} 
.onoffswitch-inner:after { 
    content: "\f425"; /* <--------THE ICON GOES HERE */ 
    padding-right: 10px; 
    background-color: #8035A7; 
    color: #FFFFFF; 
    text-align: right; 
} 
.onoffswitch-switch { 
    display: block; 
    width: 41px; margin: -1.5px; 
    background: #FFFFFF; 
    border: 2px solid #999999; 
    border-radius: 50px; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 66px; 
    -moz-transition: all 0.3s ease-in 0s; 
    -webkit-transition: all 0.3s ease-in 0s; 
    -o-transition: all 0.3s ease-in 0s; 
    transition: all 0.3s ease-in 0s; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
}

HTML：

<div class="onoffswitch"> 
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
     <label class="onoffswitch-label" for="myonoffswitch"> 
      <p id="impressions_meter_text">Impressions meter</p> 
      <span class="onoffswitch-inner"></span> 
      <span class="onoffswitch-switch"></span> 
     </label> 
    </div>

來源

2015-05-03 undroid

你缺少一個@font-face聲明將在「Ionicons」字體，加上.onoffswitch-inner:after聲明不指定font-family: "Ionicons";。

我已經從他們的css中提取了Ionicons字體聲明並將其添加到a forked jsFiddle。

來源

2015-05-03 09:48:01 ckuijjer

您需要導入離子圖標css文件加載圖標字體。請在https://github.com/driftyco/ionicons

下載閱讀文檔和提取相應的字體包
複製ionicons.css到項目
複製字體文件夾到您的項目
確保ionicons中字體的網址。 css正確引用項目中的字體路徑。
包含您需要使用它的每個網頁中對ionicons.css文件的引用。

然後，而不是放「內容」直接，你可以使用該框架提供給我們的類，如：

<i class="icon ion-home"></i>

來源

2015-05-03 09:43:09

這不是問題。 – Adam

你錯了Adam，如果你不導入你永遠無法加載圖標的CSS字體，那麼在用戶提供給我們圖標字體不存在的例子中。 –

OP沒有詢問如何使用'i'標籤 - OP詢問字符何時被包含在「內容」規則中是如何顯示的 - 這是因爲1）字體未被包含（如你的文章所述）和2）因爲OP沒有聲明'font-family' – Adam

您ommit的font-family屬性..當你使用一個代碼從字體圖標到CSS的內容屬性，你必須做這樣的：

.custom-icon:after { 
    content: "\f425"; 
    font-family: "the name of the font icon you are using"; 
}

就是這樣：P

來源

2015-05-03 11:00:47

使用Ionic V2

要在您的css中使用來自：https://ionicframework.com/docs/v2/ionicons/的ionicons，您只需要這樣做。

.yourclass { 
     font-family: "Ionicons"; 
     content: "\f3d1"; 
}

會打印：<ion-icon name="arrow-forward"></ion-icon>

，你可以找到在內容十六進制：

node_modules/ionic-angular/css/ionic.css: 

node_modules/ionic-angular/css/ionic.dark.css

來源

2017-01-17 12:20:20 Raduken

CSS \ HTML - 如何將Ionicons添加到CSS「content」屬性？

回答

相關問題