CSS\HTML - 如何将 Ionicons 添加到 CSS“内容”属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30012304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS\HTML - How to add Ionicons to CSS "content" property?
提问by Alex
I'm using a custom switchtoggle (from here) and I want to add an icon instead of regular text. When I paste the Ioniconscode to the CSS contentproperty it appears as a rectangle (some indication for the fact the character\font was not found). How do I get pass this?
我正在使用自定义switch切换（来自此处）并且我想添加一个图标而不是常规文本。当我将Ionicons代码粘贴到 CSScontent属性时，它显示为一个矩形（某些指示未找到字符\字体的事实）。我如何通过这个？
EDIT: I forgot to add, I have included the CSS from CDN.
编辑：我忘了补充，我已经包含了 CDN 的 CSS。
Switch CSS:
切换 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:
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>
回答by ckuijjer
You're missing a @font-facedeclaration that imports the "Ionicons" font face, plus the .onoffswitch-inner:afterdeclaration doesn't specify the font-family: "Ionicons";.
您缺少@font-face导入“Ionicons”字体的.onoffswitch-inner:after声明，而且该声明未指定font-family: "Ionicons";.
I've extracted the Ionicons font declaration from their css and added it to a forked jsFiddle.
我已经从他们的 css 中提取了 Ionicons 字体声明并将其添加到一个分叉的 jsFiddle 中。
回答by Skecci Dev
You ommit the font-family property .. when you use a code from a font icon into CSS content property you must do it like this :
您省略了 font-family 属性 .. 当您将字体图标中的代码用于 CSS 内容属性时，您必须这样做：
.custom-icon:after {
content: "\f425";
font-family: "the name of the font icon you are using";
}
And that's it :P
就是这样：P
回答by raduken
Using Ionic V2
使用 Ionic V2
to use ionicons from : https://ionicframework.com/docs/v2/ionicons/in your css, you just need to do like that.
要在您的 css 中使用来自https://ionicframework.com/docs/v2/ionicons/ 的ionicons ，您只需要这样做。
.yourclass {
font-family: "Ionicons";
content: "\f3d1";
}
this will print:<ion-icon name="arrow-forward"></ion-icon>
这将打印：<ion-icon name="arrow-forward"></ion-icon>
you can find the content hexadecimal in:
您可以在以下位置找到十六进制内容：
node_modules/ionic-angular/css/ionic.css:
node_modules/ionic-angular/css/ionic.dark.css
回答by Jose Mato
You need to import ion icon css files to load the icon font. Please, read the doc at https://github.com/driftyco/ionicons
您需要导入 ion icon css 文件来加载 icon 字体。请阅读https://github.com/driftyco/ionicons 上的文档
- Download and extract the font pack
- Copy the ionicons.css to your project
- Copy the fonts folder to your project
- Ensure the font urls within ionicons.css properly reference the fonts path within your project.
- Include a reference to the ionicons.css file from every webpage you need to use it.
- 下载并解压字体包
- 将 ionicons.css 复制到您的项目中
- 将字体文件夹复制到您的项目中
- 确保 ionicons.css 中的字体 url 正确引用项目中的字体路径。
- 在您需要使用它的每个网页中包含对 ionicons.css 文件的引用。
Then, instead of put "content" directly, you could use the classes that framework provide us, as:
然后，您可以使用框架为我们提供的类，而不是直接放置“内容”，例如：
<i class="icon ion-home"></i>
<i class="icon ion-home"></i>
