标签: ionicons

我正在使用自定义switch切换(从这里),我想添加一个图标而不是常规文本.当我将Ionicons代码粘贴到CSS content属性时,它显示为一个矩形(表示没有找到字符\ font的事实).我如何通过这个？

编辑:我忘了添加,我已经包含了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; …

我需要在离子2中使用带有标签的海关图标.

此外,如果选中该选项卡,我需要更改标题颜色和图标.

例:

离子标签

我正在尝试更改鼠标悬停时显示的离子图标标题。
例子：
我已经尝试了至少几个小时来找到解决方案。我只是不知道如何通过 css 访问 ion-icon 的标题元素，以便能够将其内容更改为“编辑”而不是“创建”。任何帮助，将不胜感激。

我想用箭头显示方向,并且正在考虑使用标准离子箭头作为方向.我能以某种方式将向上箭头旋转到任何方向吗？

ion-arrow-up-a

以下是对以下评论的尝试

<i class="icon ion-arrow-up-a" rotate degrees="90"></i>


angular.module('app.customDirectives', []).directive('rotate', function() {
      return {
            link: function(scope, element, attrs) {
                // watch the degrees attribute, and update the UI when it changes
                scope.$watch(attrs.degrees, function(rotateDegrees) {
//                  console.log(rotateDegrees);
                    //transform the css to rotate based on the new rotateDegrees
                    element.css({
                        '-moz-transform': 'rotate(' + rotateDegrees + 'deg)',
                        '-webkit-transform': 'rotate(' + rotateDegrees + 'deg)',
                        '-o-transform': 'rotate(' + rotateDegrees + 'deg)',
                        '-ms-transform': 'rotate(' + rotateDegrees + 'deg)'
                    });
                });
            }
    }
});

我一直遇到错误，直到重新设置Metro Bundle并执行更新为止，从所需的模块“ 699”到“ 700”的错误不断出现，现在是这样。我相信我具有Drawer导航器和ionicicons所需的所有依赖关系，但错误仍然持续存在。我有用不同文件编写的代码，但是下面是用App.js编写的代码。随意询问其他问题，以解决当前的问题。

import React from 'react';
import {
  View,
  Text,
  StyleSheet

} from "react-native" ;

import  DrawerNavigator  from './Menu/DrawerNavigator';
import SettingScreen from './Menu/SettingScreen'

export default class App extends React.Component {

  render(){

    return (
<View style ={style.container}>
  <SettingScreen/>
  </View>


    );
  }
}


style = StyleSheet.create ({

  container: {
    flex: 1,
    justifyContent: 'center',


  },
});

如何将 ionicons 版本 5 添加到 Angular，版本 4.5 有一个 scss 可用，我可以以这种方式使用，但现在在版本 5 ionicons 使用 svgs 并且不知道如何将其与 Angular 集成。

目前的方法在 angular.json 中

"styles": [
              "./node_modules/ionicons/dist/scss/ionicons.scss",
              "src/app/theme/styles/styles.scss"
            ],

然后在我的 app.component.ts 中（我使用的是 nebular UI） https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });
    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

我在问题中看到，对于带有角度的离子，它们添加

"assets": [
              {
                "glob": "**/*",
                "input": "src/assets", …

我正在尝试通过 ionic (v5) 将 GitHub 徽标嵌入到我的项目中，该项目重定向到我制作的项目的 GitHub 存储库。

该徽标有一个令人讨厌的标题“ionicons-v5_logos”，当我将鼠标悬停在该图标上时会出现该标题。如何删除徽标的标题？我试图通过在 HTML 中编写以下代码来删除徽标的现有标题（但它似乎没有删除离子图标上的标题）-

<ion-icon name="logo-github" title="Check the code"></ion-icon>

我尝试使用aria-label,aria-hidden和ariaLabel属性来设置/隐藏离子图标的标题，但没有任何效果。谁能指导我删除离子图标的标题？

出于某种原因，我得到的是中文符号而不是正确的图标。我在 app/fonts 目录中有 .ttf，在 /app 下有 .css。希望你能发现我的错误

应用程序.css

.fa {
    font-size: 60;
    font-family: FontAwesome, fontawesome-webfont;
}

.ion {
  font-family: Ionicons, ionicons;
  font-size: 60;
}

主文件

import { TNSFontIconService } from 'nativescript-ng2-fonticon';

nativeScriptBootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(TranslateLoader, {
    useFactory: () => {
      return new TNSTranslateLoader('assets/i18n');
    }
  }),
  TranslateService,
  provide(TNSFontIconService, {
    useFactory: () => {
      return new TNSFontIconService({
        'fa': 'font-awesome.css',
        'ion': 'ionicons.css'
      });
    }
  })  
])

页面.html

  <Button class="fa" [text]="'fa-bluetooth' | fonticon"></Button>
  <Label class="ion" [text]="'ion-flag' | fonticon"></Label>

页面.ts

import { TNSFontIconService, TNSFontIconPipe } …

我将 ionic-vue 与 ionicons 5.0.1 一起使用，但在通话后

<ion-icon name="add"></ion-icon>

我正在关注https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj和https://github.com/ionic-team/ionic/issues/19078教程，但卡住了和图标在 FAB 中无法显示。这是我的语法，谢谢你的帮助。

<template>
   <ion-page>

        ....

        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button @click="$router.push({ name: 'new-item' })">
                <ion-icon name="add"></ion-icon>
            </ion-fab-button>
        </ion-fab>
        </ion-content>
    </ion-page>
</template>

<script>

...

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {
  const key = i.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
  if(typeof allIcons[i] === 'string') {
    return {
      [key]: allIcons[i],
    }
  }
  return {
    ['ios-' + key]: allIcons[i].ios,
    ['md-' + …

我在我的 flutter 应用程序中使用 Ionicons pagckage 作为图标。但是当执行 flutter build appbundle 时，它​​向我显示这个错误 -

Expected to find fonts for (packages/Ionicons/Ionicons, MaterialIcons), but found (MaterialIcons). This usually means you are referring to font families in an IconData class but not including them in the assets section of your pubspec.yaml, are missing the package that would include them, or are missing "uses-material-design: true".

我已经写uses-material-design: true在我的 pubspec.yaml 中了。这是我的 pubspec.yaml 文件 -

name: my_app_name
description: A new Flutter project.

publish_to: 'none'

version: 0.0.9+9

environment:
  sdk: …