最新公告
  • 欢迎您光临知事网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • Iconfont-阿里巴巴矢量图标库

     

    传送门:Iconfont-阿里巴巴矢量图标库

    Iconfont-阿里巴巴矢量图标库(https://www.iconfont.cn/),顾名思义就是一个矢量图标库,简直就是设计师的必备神器,非常实用。现在Iconfont图标数量已经超过千万了,意思就是你想要啥都有,搜一下轻轻松松找到。

    Iconfont功能介绍

    1、支持关键词模糊搜索,可以搜图标搜用户,中文 / English / Pinyin 无缝互译;

    2、下载详情页:可查阅icon归属图标库与作者,多色图标支持分路径改色,下载图标自动保存最近使用的颜色;

    3、购物车:将图标加入购物车后,可以批量下载素材和代码、批量添加至项目;

    4、支持单个或批量上传多个icon、支持单色/多色icon同时上传、支持图标自定义配置标签;

    5、图标库是一系列相关图标的集合,由图标上传者创建,需通过审核才可公开/加密访问 图标库分为官方图标库/自定义图标库/多色图标库;

    6、“项目”是帮助团队协同合作的共享模块,创建项目后,视觉同学上传icon,交互/产品同学可以⾃自由下载图标,前端同学可以将图标以字体格式添加至代码,支持三种格式代码使用;

    7、支持原创图标,尊重设计成果,在“用户”与“图标库”维度支持打赏,如果你喜欢哪位设计师,赶快去打赏吧~

    Iconfont的优势

    1、自由变化大小(高清屏无压力);

    2、自由修改颜色(纯色);

    3、可以添加一些视觉效果如:阴影、旋转、透明度;

    Iconfont使用

    网站

    1、声明字体

    @font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
    

    2、定义样式

    .iconfont{font-family:"iconfont";
    font-size:16px;font-style:normal;}
    

    3、选择图标、获取字体编码,应用于页面

    <i class="iconfont">&#33</i>

    Android应用

    1、下载demo代码;

    2、复制字体文件到项目 assets 目录;

    3、打开 iconfont 目录中的 demo.html,找到图标相对应的 HTML 实体字符码;

    4、打开 res/values/strings.xml,添加 string 值;

    <string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af;</string>
    

    5、打开 activity_main.xml,添加 string 值到 TextView

    <TextView
    android:id="@+id/like"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icons" />
    

    6、为 TextView 指定文字

    import android.graphics.Typeface;
    
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
    TextView textview = (TextView)findViewById(R.id.like);
    textview.setTypeface(iconfont);
    }
    

    iOS应用

    1、下载demo代码;

    2、将字体文件(.tff)添加到工程中;

    3、打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:iconfont.ttf

    UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
    UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
    label.font = iconfont;
    label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
    [self.view addSubview: label];
    

    注意:

    创建 UIFont 使用的是字体名,而不是文件名;

    可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码。

    找互联网优质资源,上知事网!
    知事网 » Iconfont-阿里巴巴矢量图标库

    常见问题FAQ

    网盘提取密码在哪里?
    在网站右侧有个“文件密码”,点击复制即可!
    网站的积分如何获得?
    注册登录后,每天签到可获得2个积分,每天可签到一次!

    发表评论

    • 1255会员总数(位)
    • 665资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 3459稳定运行(天)

    提供最优质的资源集合

    Mac软件 Dedecms源码
    升级SVIP尊享更多特权立即升级