标签: ionicons

出于某种原因，我得到的是中文符号而不是正确的图标。我在 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 } …

我有这个简单的代码片段,带有四个带有CSS缩放变换的按钮:

.social-buttons {
  height: 90px;
  margin: auto;
  font-size: 0;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.social-button {
  display: inline-block;
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px;
  margin: 0 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  opacity: .99;
  border-radius: 28%;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
  content: '';
  background-color: #000;
  width: 120%;
  height: …

在ionicons使用npm 安装v3.0.0 之后，将字体导入到我的应用程序时遇到很多麻烦：

// /src/App.vue
@import '../node_modules/ionicons/dist/scss/ionicons.scss';

似乎指向正确的路径，但是，我遇到了很多错误，例如

Cannot find module "../fonts/ionicons.eot?v=3.0.0-alpha.3

显然，此问题源于字体文件，因为例如，上面的文件实际上是ionicons.eot，而不是ionicons.eot?v=3.0.0-alpha.3。

我还在Github上进行了3年的讨论，并尝试了评论中建议的每个装载程序，但没有一个起作用。我是Vue和Webpack的新手，所以我不确定自己做错了什么。

问题：为了能够在vue-loader的应用程序中使用Ionicons（或Font Awesome或其他字体库），我需要做什么？

我将 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-' + …

我有一个rails应用程序,我想使用它们.按照说明,我确保.css中的字体路径是资产/字体/离子...但它似乎没有工作.以前有人用过吗？

我注意到我在我的cordova项目中使用的一些图标没有在我的任何设备上显示.那些不工作的似乎在图标名称中有单词ios或android(例如:ion-android-list或ion-ios-book-outline).任何想法为什么他们只是显示空白？到目前为止,我使用通用名称的任何图标都可以正常工作(例如离子时钟,离子卡).我从这里取的图标名称:ionicons

我已将其包含在我的index.html文件中:

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

我正在尝试将离子类添加到我的Angular 4应用程序中.以下是采取的步骤:

1. 在http://ionicons.com/我下载了zip文件并将其解压缩.
2. 我在Angular项目中创建了一个名为icons的新文件夹
3. 我将ionicon.min.css文件和fonts文件夹从解压缩的包拖到我的新图标文件夹中.
4. 在项目的index.html文件中,我添加了css文件.
5. 现在在我之前创建的页脚组件中,我正在尝试使用图标.
6. 我在index.html文件中遇到有关路径的服务器错误.

我错过了somrthing吗？

如何在运行 ng serve (npm start) 的 Angular 4 cli 项目中添加离子 (Sass)？

我按照以下步骤操作：

1. 导入离子库

   @import "~ionicons/dist/scss/ionicons";

2. 在 variables.scss 中：

   $ionicons-font-path: "~ionicons/dist/fonts";

在控制台中没有给出错误，但字体尚未加载且图标未出现。

使用

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

工作正常。

我使用 ion-icon 作为

.html

<ion-icon name="ios-thumbs-up-outline" [style.color]="'#EF3B51'"></ion-icon>

当我这样做时，图标的轮廓变为红色，但我想在图标内的空白区域填充红色。

您可以看到下图：

我在用我的应用程序显示图标时遇到问题。我导入的任何图标，例如：从React本机库，@ expo / vector-icons，react-native-vector-icons / Ionicons等。

它只会显示（X）或？

我尝试了许多方法，包括使用React-Native的默认导入图标的react-native链接。这一切都不起作用。

参考：

1）https://ionicons.com/cheatsheet.html

2）https://www.npmjs.com/package/react-native-ionicons

我将在此处附上我的代码和屏幕截图，希望它有助于解决我的问题。谢谢。

import Icon from 'react-native-ionicons'


        <ListItem style={styles.listitem_home} onPress={this.navigateToScreen('ExampleSendDataScreen')}>
          <Thumbnail square size={80} source={require('../../assets/images/message.png')}  style={{marginRight: 10}}/>
          <Body>
            <Text>{Strings.ST17}</Text>
            <Text numberOfLines={1} note style={styles.note_home}>{Strings.ST17}</Text>
          </Body>
          <Right>
            <Icon name="menu" style={styles.icon_home} />                
          </Right>
        </ListItem>

图标样式

icon_home:{

fontSize: 20,
color: 'black'
},

当前在我的应用程序中显示的唯一图标是“导航器后退”按钮。

编辑1：已安装@ expo / vector-icons 9.0.0

编辑2：更新到Expo v32

Package.json

"dependencies": {
"@expo/vector-icons": "^9.0.0",
"@material-ui/core": "^3.9.0",
"@types/expo__vector-icons": "^6.2.3",
"antd-mobile": "^2.2.6",
"babel-plugin-import": "^1.11.0",
"es6-symbol": "^3.1.1",
"expo": "^32.0.0",
"firebase": "^5.8.1",
"haversine": "^1.1.0",
"moment": "^2.23.0",
"moment-timezone": …

如何向ionicons添加自定义图标？我还没找到一步一步的指示做什么.有许多非常基本的图标(例如段落图标),不是由离子提供的,所以我不得不自己添加它们.

所以我正在写一个功能组件，我写了一个道具。
所以我希望它能够自动建议名称属性。像这样的东西

import { Ionicons } from "@expo/vector-icons";

export interface ownWrittenProps {
  leftIcon?: ????????;
}

因此，当人们开始输入 <FunctionalComponent leftIcon="Ionicons时，它可以从我想使用它的原因中建议可接受的图标名称，因为它无论如何都会打包到 ios/apk 包中。我应该输入什么????????以便它可以建议名称？

另一个问题，如果我的 ChildComponent 中有一个文本框，如何从父组件中检索文本/值？

我安装了ionicons,npm install --save ionicons以便我package.json更新到:

"dependencies": {
    "ionicons": "^3.0.0"
}

接下来,我加入我的下面/resources/assets/sass/app.scss:

// Ionicons
@import "node_modules/ionicons/dist/scss/ionicons";

成功运行后npm run dev,我最终得到了

/public
    /css
        app.css
    /fonts
        /vendor
            /ionicons
                /dist
                    ionicons.eot
                    ionicons.svg
                    ionicons.ttf
                    ionicons.woff
                    ionicons.woff2

在浏览器控制台中没有错误,没有显示单个 ionicon(例如<i class="icon ion-home"></i>).我检查过public/css/app.css,发现它引用了像这样的离子字体:/fonts/vendor/ionicons/dist/ionicons,这似乎符合上面的文件夹结构.

我尝试调整@import,改变url(...)参考app.css,移动字体目录 - 没有运气.最后,我尝试通过CDN引用离子,它就像魅力一样.

我在这做错了什么？谢谢